CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Tushar Mishra
Tushar Mishra

Reputation: 23

How to select a single div and animate it and its related elements in jquery independent of others

I have three elements with the same class in HTML and I applied some effects using jQuery to the ".tag" class and related classes like ".content", which are triggered on hovering over them. But hovering over just one of the "tag" classes triggers the animation in all three of the divs because they have the same class name. I want the animation to trigger only on the "tag" class that I hover over. I tried using $(this) instead of $(".tag") but the animations are not triggered on the related divs like "content" or "tag-arrow". Here is my HTML, and JS code:

        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>

Kindly help me. Thanks in advance.

Upvotes: 0

Views: 297

Answers (1)

Vinod Louis
Vinod Louis

Reputation: 4876

see this use parent() and find() selectors for respective 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>

Upvotes: 1

Related Questions