javascript - 如何选择单个 div 并在 jquery 中独立于其他元素对其及其相关元素进行动画处理

Question

我在 HTML 中有三个具有相同类的元素，并且我使用 jQuery 对“.tag”类和相关类(如“.content”)应用了一些效果，这些效果在将鼠标悬停在它们上方时触发。但是，仅将鼠标悬停在其中一个“标签”类上就会触发所有三个 div 中的动画，因为它们具有相同的类名。我希望动画仅在我悬停的“标签”类上触发。我尝试使用 $(this) 而不是 $(".tag") 但动画不会在相关 div 上触发，例如“内容”或“标签箭头”。这是我的 HTML 和 JS 代码:

        var quicker = 100;
        var quick = 250;
        var quickish = 500;

        //  mouse over
        $(".tag").hover(function() {

            $(".tag").stop().animate({
                opacity: 1,
                height: "200px",
                width: "250px",
                bottom: "13%"
            }, quick);

            $(".tag--arrow").stop().animate({
                opacity: 1
            }, quick);

            $(".content").css({
                opacity: 0.0,
                visibility: "visible"
            }).delay(quick).animate({
                opacity: 1.0
            }, quicker);

            $(".bottom-row").css({
                opacity: 0.0,
                visibility: "visible"
            }).delay(quick).animate({
                opacity: 1.0
            }, quicker);


            //  mouse out
        }, function() {

            $(".tag").stop().animate({
                opacity: 0.5,
                height: "50px",
                width: "50px",
                bottom: "15%"
            }, quick);

            $(".tag--arrow").stop().animate({
                opacity: 0.5
            }, quick);

            $(".content").css({
                opacity: 1,
                visibility: "hidden"
            }).animate({
                opacity: 0
            }, quick);

            $(".bottom-row").css({
                opacity: 1,
                visibility: "hidden"
            }).animate({
                opacity: 0
            }, quick);
        });

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding:0;margin:0;">
        <div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 0, "percentPosition": true }'>
            <div class="grid-item col-xs-6 col-sm-4 col-md-4">
                <div class="grid-item-content">
                    <h2>Rishikesh</h2>
                    <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
           <div class="grid-item col-xs-6 col-sm-8 col-md-4" style="background: url('../bonfire/images/gallery/thumb/16.jpg');">
                <div class="grid-item-content">
                    <h2>Agra</h2>
                <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
          <div class="grid-item grid-item--height2 col-xs-6 col-sm-4 col-md-4" style="background: url('../bonfire/images/gallery/thumb/15.jpg');">
                <div class="grid-item-content">
                    <h2>Varanasi</h2>
                <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
  </div>
  
  

请帮助我。提前致谢。

Answer 1

看到这个使用 parent() 和 find() 选择器来分别this

        var quicker = 100;
        var quick = 250;
        var quickish = 500;

        //  mouse over
        $(".tag").hover(function() {

            $(this).stop().animate({
                opacity: 1,
                height: "200px",
                width: "250px",
                bottom: "13%"
            }, quick);

            $(this).parent().stop().animate({
                opacity: 1
            }, quick);

            $(this).find(".content").css({
                opacity: 0.0,
                visibility: "visible"
            }).delay(quick).animate({
                opacity: 1.0
            }, quicker);

            $(this).find(".bottom-row").css({
                opacity: 0.0,
                visibility: "visible"
            }).delay(quick).animate({
                opacity: 1.0
            }, quicker);


            //  mouse out
        }, function() {

            $(this).stop().animate({
                opacity: 0.5,
                height: "50px",
                width: "50px",
                bottom: "15%"
            }, quick);

            $(this).parent().stop().animate({
                opacity: 0.5
            }, quick);

            $(this).find(".content").css({
                opacity: 1,
                visibility: "hidden"
            }).animate({
                opacity: 0
            }, quick);

            $(this).find(".bottom-row").css({
                opacity: 1,
                visibility: "hidden"
            }).animate({
                opacity: 0
            }, quick);
        });

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding:0;margin:0;">
        <div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 0, "percentPosition": true }'>
            <div class="grid-item col-xs-6 col-sm-4 col-md-4">
                <div class="grid-item-content">
                    <h2>Rishikesh</h2>
                    <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
           <div class="grid-item col-xs-6 col-sm-8 col-md-4" style="background: url('../bonfire/images/gallery/thumb/16.jpg');">
                <div class="grid-item-content">
                    <h2>Agra</h2>
                <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
          <div class="grid-item grid-item--height2 col-xs-6 col-sm-4 col-md-4" style="background: url('../bonfire/images/gallery/thumb/15.jpg');">
                <div class="grid-item-content">
                    <h2>Varanasi</h2>
                <div class="tag--arrow"></div>
                    <div class="tag">
                        <div class="texxt">Our hostel</div>
                        <div class="content">
                            <h1>Title</h1>
                            <p>Description lorem ipsum lksd flksdf jfkdlskf.</p>
                        </div>
                        <div class="bottom-row">
                            <div class="left">
                                <a href="#">View More</a>
                            </div>
                            <div class="right">
                                <p>Add to Cart</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
  </div>