Question

上修理了一些东西

第一张幻灯片有一个向下滚动的按钮。虽然悬停它是假设在垂直轴上反弹。

它在firefox上工作得很好，但在其他浏览器上，例如Chrome，Opera，safari和IE，按钮正在向左移动。

这里是html：

<div class="container" id="welcome-inner-box">
    <div class="scroll-down-arrow"><div>SCROLL DOWN</div><img alt="scroll-down-canvas" src="<?php echo $this->basePath(); ?>/img/scrolldown_icon.png"></div>
</div>

这里是javascript：

$('.scroll-down-arrow').mouseenter(function(){
    $(this).effect("bounce", { times: 4 }, 1000);
    $('.scroll-down-arrow a').css('color', '#fff');
});

$('.scroll-down-arrow').mouseleave(function(){
    $('.scroll-down-arrow a').css('color', '#999999');
    $(this).stop();
});

这里是css：

.scroll-down-arrow{
    cursor:pointer;
    color:#cccccc;
    text-transform:uppercase;
    position:absolute;
    width:140px;
    left:50%;
    margin-left:-70px;
    height:60px;
    bottom:30px;
    text-align:center;
    letter-spacing:2px;
    font-weight:100;
    font-size:14px;
}

Answer 1

您需要在反弹命令的参数中指定方向

替换

$(this).effect("bounce", { times: 4 }, 1000);

用

$(this).effect("bounce", { direction:'up', times: 4 }, 1000);

Answer 2

在没有看到完整代码的情况下，我无法准确定义您的问题，但在我看来，这是由jQuery UI引起的，因为当您将鼠标悬停在元素上时，它会获得类ui-effects-wrapper和jQuery会覆盖style属性来添加： left : 570px;

如果我是正确的，那么解决方法是将此类重写为ui-effects-wrapper或删除元素的左侧属性，即50％。

第一个解决方案将实现如下：

.ui-effects-wrapper { left:50% !important; }

但这会影响您网页上使用相同类的其他任何部分，因此请注意这一点。

此外，如果您在小提琴中重现问题，我们可以通过更好的分析来指定问题。

Answer 3

我刚刚找到了解决方案。我将效果应用于children元素，然后将img包装在div中（如果不是img也会离开）。

$('.scroll-down-arrow').mouseenter(function(){
    $(this).children().effect("bounce", { direction:'up', times: 4 }, 1000); 
});

<div class="scroll-down-arrow">
    <div>SCROLL DOWN</div>
    <div>
        <img alt="scroll-down-canvas" src="<?php echo $this->basePath(); ?>/img/scrolldown_icon.png">
    </div>
</div>

Jquery效果反弹，不需要的行为

3 个答案: