Question

您好我有这段代码：

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');

}

此代码激活幻灯片的水平滚动，并在幻灯片显示的单页内显示更多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="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
                                    ABOUT
                                 </div></a>

问题是，当我点击页面中存在的div时幻灯片显示，例如div1，我需要它在第二页上水平移动，鼠标位于div后面随着滚动移动并且不要留在第一页，我该怎样避免这个？

我希望当我点击系统进入幻灯片的第二页时，不要跟他一起拖动我点击的div移动到第二页。

Answer 1

在goto()内更改了以下代码。我在这里检查#div2是否处于悬停状态。

如果是的话，我会把它恢复到原来的状态，然后我就转到下一页。

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);
}

检查here

<强>更新

只需添加其他条件，请检查上面的更新代码。

Link

避免在悬停js后转换

1 个答案: