避免在悬停js后进行转换 [英] avoid transition after hover js

问题描述

你好我有这样的代码：

pre $ function goto（id，t）{
// animate to the div id。
$（。contentbox-wrapper）。animate（{left： - （$（id）.position（）。left）}，500）;

//从#nav
$（'＃nav a'）。removeClass（'active'）;

//将活动类添加到当前链接
$（t）.addClass（'active'）;

}


此代码激活幻灯片的横向滚动，在幻灯片的单个页面内部呈现更多的div（div1，div2，div3），并在每个div附上此代码：

  $（＃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
}）; 
}）; 
  

这是HTML中的代码：

 < a href =＃onClick =goto（'＃about'，this）; return false;> 
< div id =div2style =background-color：#fff; width：250px; border：1px solid＃000; min-height：250px; color：black;> 
 ABOUT 
< / div>< / a> 
  

问题在于，当我点击页面中存在的div时，其中一个幻灯片显示例如div1，我需要它在第二页上水平移动，让鼠标在div后面移动，并且不会停留在页面中一，我该如何避免这种情况？

我希望当我点击系统进入幻灯片的第二页时，但不会与他同时拖动我点击的div移动到第二页。

<在 goto（）内改变了下面的代码。这里我检查＃div2 是否处于 hovered 状态。

如果是的话，我会回到原来的状态，然后我转到下一页。

< pre $ 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（{$ b $left： - （$（id）.position（）。left）
}，600）;
}）;
}
else {
$（。contentbox-wrapper）。animate（{$ b $left： - （$（id）.position（）。left）
}，600）;



检查它 here

更新：

b $ b

只需添加一个else条件，检查上面的更新代码。

链接

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.

解决方案

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

这篇关于避免在悬停js后进行转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！