avoid transition after hover js

问题

Hello i have this code:

function goto(id, t){   
    //animate to the div id.
    $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500);

    // remove "active" class from all links inside #nav
    $('#nav a').removeClass('active');

    // add active class to the current link
    $(t).addClass('active');

}

this code active the horizontal-scroll of the slideshow, and inside the single page of slideshow are presents more div (div1 , div2 , div3) and at each of div is attached this code:

$("#div1").hover(function() {
    var $this = $(this);
    $this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
       'height': "390",
       'width' : "840",
       'marginTop' : "-12",
       'marginLeft' : "-12",
    });
},
function() {
   var $this = $(this);
   $this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
       'height': "350",
       'width' : "800",
       'marginTop' : "0",
       'marginLeft' : "0"
    });
});

this is the code in HTML:

<a href="#" onClick="goto('#about', this); return false; " >
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
                                    ABOUT
                                 </div></a>

the problem is that when I click on a div that is present in the page One of slideshow, for example div1, and I need it to move horizontally on the second page,having the mouse inside the div latter moves with the scroll and don't stay in the page One, how can I avoid this?

I wish that when I click the system goes to the second page of the slideshow, but not with him also drag the div I clicked to move to the second page.

回答1:

Changed the following code, inside the goto(). Here I am check if #div2 is in the hovered state.

If yes, then I take it back to it's original state AND ONLY THEN I move to the next page.

if (parseInt($("#div2").css("z-index"), 10) > 1) {
    $("#div2").css({
        'z-index': '1',
        'boxShadow': '0px 0px 0px ',
        'position': 'static'
    }).animate({
        'height': "250",
        'width': "250",
        'marginTop': "0",
        'marginLeft': "0"
    }, function(){
        $(".contentbox-wrapper").animate({
        "left": -($(id).position().left)
       }, 600);
   });
}
else {
    $(".contentbox-wrapper").animate({
        "left": -($(id).position().left)
    }, 600);
}

Check it here

UPDATE:

Just add an else condition, check the update code above.

Link

来源：https://stackoverflow.com/questions/17229493/avoid-transition-after-hover-js

标签

javascript

onclick

hover