CODEWITHSUNDEEP
jquery
Anthony Gainor
Anthony Gainor

Reputation: 1179

Fading in and out multiple elements

I have multiple elements I want to fade in and out when a person hovers over a div. There is a title and the info, when a person hovers over that specific title I want the title to fade out and the info belongs to that title to fade in.

Here is the code:

$(document).ready(function(e) {
    if($(".info").is(":visible")) {
        $(".info").hide();
    }

    $(".title").mouseenter( function() {
        $(this).fadeOut(100);
        $(this).$(".info").fadeIn(100);
    })
    $(".info").mouseleave( function() {
        $(this).fadeOut(100);
        $(this).$(".title").fadeIn(100);
    })

});

My question is: how do I make the info that belongs to that title to fade in and not all the other infos.

Here is the HTML it has a little of php

<div class="holder">

            <div class="title">
                <img alt="random" src="pictures/<?php echo $company['picture']; ?>" height="100" width="100">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>
            </div>

            <div class="info">
                <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['message']; ?></a></p>
            </div>

        </div>

Upvotes: 1

Views: 163

Answers (4)

adeneo
adeneo

Reputation: 318182

The best thing would be to just give the .holder element style and size, and target the .holder element as that would make it easy to just fade it's children in and out without size changes and disappearing elements messing up the event handlers, and you can target the children of each .holder in one function without traversing up and down the DOM tree to much :

css:

.holder {position: relative; 
         height: 140px; 
         width: 100px;
        }​

js:

$(function() {
    $(".info").hide(); //no need to check if the class is visible

    $(".holder").on('mouseenter mouseleave', function() {
        $('.info, .title', this).fadeToggle(100);
    })
});​

FIDDLE

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

You can do that with less code like this different method:

Here is jsFiddle to play with.

html:

<div class="title">
          <img src="http://www.hurriyet.com.tr/_np/2769/17512769.jpg" height="100" width="100">
          <p><a href="profile.php?company=<?php echo $company['id']; ?>"><?php echo $company['title']; ?></a></p>

          <div class="info">
                <p>here is some info.here is some info.here is some info.</p>
          </div>
 </div>

-------------------

jQuery:

$(document).ready(function() {

    $('.title').bind({
        mouseenter: function() {
            $(this).children(".info").stop(false,true).fadeIn(100);
        }, mouseleave: function() {
            $(this).children(".info").stop(false,true).fadeOut(100);
            $(this).fadeIn(100);
        }
    });

});​

-------------------

css:

.info { display:none; }

Upvotes: 0

Lauw
Lauw

Reputation: 1715

What you want to do is specifically target the element, if they are always in this order, you can use:

$(this).next().fadeIn(100);

to then get back to the title, you can use

$(this).prev();

from the info

Upvotes: 0

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

Try this

$(document).ready(function(e) {
  if($(".info").is(":visible")) {
    $(".info").hide();
  }

  $(".title").mouseenter( function() {
     $(this).fadeOut(100);
     $(this).next(".info").fadeIn(100);
   });

   $(".info").mouseleave( function() {
     $(this).fadeOut(100);
     $(this).prev(".title").fadeIn(100);
   });

});

Upvotes: 1

Related Questions