CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daniel
Daniel

Reputation: 81

Is there a toggle for hover or mouseenter/mouseleave?

I have some div element which each one contains a few div elements inside. So I want to give effect these div element in hover. I am not sure to use hover or mouseenter. For example in hover of a div, it must run an animate am move to left or change its color. But the effect stays even when I move the mouse somewhere else, which it isnt what I want. I want it to be working like css hover which moves back after mouseleave. DEMO

Here is my code:

$(document).ready(function(){
    $(".close").hide();
    $(".ln, .gw, .mc, .rt").hover(function(){
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).animate({
            "margin-left": "100px"                        
         }, 500);

        $(classname).find(".close").fadeIn(500);
    });
});

HTML

<div class="item1">
    <div class="name1 ln">name 1</div>
    <div class="name2 ln">name 2</div>
    <div class="name3 ln">name 3</div>
    <div class="close">close</div>
</div>
<div class="item2">
    <div class="name4 gw">name 1</div>
    <div class="name5 gw">name 2</div>
    <div class="name6 gw">name 3</div>
    <div class="close">close</div>
</div>
<div class="item3">
    <div class="name7 mc">name 1</div>
    <div class="name8 mc">name 2</div>
    <div class="name9 mc">name 3</div>
    <div class="close mc">close</div>
</div>
<div class="item4">
    <div class="name10 rt">name 1</div>
    <div class="name11 rt">name 2</div>
    <div class="name12 rt">name 3</div>
    <div class="close">close</div>
</div>

Any idea?

Upvotes: 0

Views: 412

Answers (4)

Renze
Renze

Reputation: 34

I would do this 

 $(document).ready(function(){
    $(".close").hide();
    $(".ln, .gw, .mc, .rt").hover(function(){
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop();
        $(name).animate({
            "margin-left": "100px"                        
         }, 500);

        $(classname).find(".close").stop();
        $(classname).find(".close").fadeIn(500);
    }, function(){
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop();
        $(name).animate({
            "margin-left": "0px"                        
         }, 500);

        $(classname).find(".close").stop();
        $(classname).find(".close").fadeOut(500);
    });
});

as jQuery code. fixed it ;)

Upvotes: 1

TheYaXxE
TheYaXxE

Reputation: 4294

You can also use toggleClass

Fiddle Demo

Upvotes: 0

DaniP
DaniP

Reputation: 38252

Hi you can first add another class on all items like .item to target each one and then just the second div with jquery, try this:

$(".item").each(function(){
    $(this).find('div').eq(1).hover(function(){
      var name = $(this);
      $(this).toggleClass('active');
      if($(this).hasClass('active')){
          $(name).stop().animate({
           "margin-left": "100px"                        
          }, 500);
        } else {
          $(name).stop().animate({
           "margin-left": "0"                        
          }, 500);
        }
      $(this).parent().find(".close").stop(true,true).fadeToggle(500);
    })
 })

Check this Demo Fiddle

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

Use a callback function

$(document).ready(function(){
    $(".close").hide();
    $(".ln, .gw, .mc, .rt").hover(function () {
        console.log('working');
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop().animate({
            "margin-left": "100px"                        
         }, 500);

        $(classname).find(".close").fadeIn(500);
    }, function () {
        console.log('workign2');
        var classname = $(this).parent();
        var name = $(classname).children(':first-child').next();

        $(name).stop().animate({
            "margin-left": "0px"                        
         }, 500);
        $(classname).find(".close").fadeOut(500);
    });

Demo

Upvotes: 0

Related Questions