Question

请参阅此Fiddle

我所拥有的是同一类的button和div。当我点击类的button时，相同类的div获取scrollIntoView并且.log出现在旁边 right 方面的div。

问题

OnClick按钮不会发生滚动
.log

div

小三角形指针不会出现在.log

添加（我想要的东西，但不知道我该怎么做！）

每当.log出现时，我希望它可以轻微摇动up和down 继续进行，直到mouseover
mouseout我需要.log到fadeOut(2000)

FOR downvoters

<button class="a1">Div1</button>
<button class="a2">Div2</button>
<button class="a3">Div3</button>
<button class="a4">Div4</button>
<button class="a5">Div5</button>
<button class="a6">Div6</button>
<div id="container">
    <div class="a1">This is div1</div>
    <div class="a2">This is div2</div>
    <div class="a3">This is div3</div>
    <div class="a4">This is div4</div>
    <div class="a5">This is div5</div>
</div>
<div class="log">Your have a fatal error.</div>


#container div {
    height:250px;
    width:250px;
    border:2px solid #000;
    margin:15px;
}
#container {
    margin:20px;
}
.log {
    z-index: 1;
    display: none;
    color: #fff;
    background-color: #c04848;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width:270px;
    font-size:15px;
    padding:10px;
    position: absolute;

}
.log:after {
    top: 0;
    left: -9px;
    border-top: 9px solid #c04848;
    border-left: 9px solid transparent;
}


    $('button').click(function(){
             var c =  $(this).attr('class');
             var div = $('#container div.'+c);     
        $(document).scrollTo(div, 1000);
        log.css({
            top : div.position().top + div.height()/2,
            left : div.position().left + 20
        }).show();
    });

Answer 1

修正了它

$('button').click(function(){
         var c =  $(this).attr('class');
         var div = $('#container div.'+c);     
    $(document).scrollTop(div.offset().top);
    $('.log').css({
        top : div.position().top + div.height()/2,
        left : div.position().left + 20
    }).show();
});

我所做的是将scrollTo更改为scrollTop。我已经添加了一个选择器来记录类，因为很可能你忘了它。

摇摇欲坠的影响

var inter;
function bounceOn(){
    var pos = $('.log').position().left;
    $('.log').animate({left: pos+50},500, function(){$('.log').animate({left: pos},500)})
    setTimeout(bounceOn, 1000);
}

尝试并尝试一下吗？

http://jsfiddle.net/h76jg/6/

Answer 2

我的答案的所有部分都显示在此JFiddle

中

就scrollTo而言，您可能正在寻找scrollTop。尝试这样的事情：

scrollTop: div.offset().top

而不是：

$(document).scrollTo(div, 1000);

虽然，只是按照你在那里的写作，我会假设你想要一些顺利过渡到div，对吗？试试这个：

$('html, body').animate({
    scrollTop: div.offset().top
}, 1000);

这将创建一个平滑滚动到div，而不是仅仅移动到它。

对于日志部分，您忘记引用日志类。相反，你试图像变量一样引用它，所以解释器感到困惑。尝试将log css调用放在引用中，如下所示：

$('.log').css({...

希望这些帮助！

编辑：您是否打算使用This之类的内容进行反弹？（上和下？）。无论是Case，@ Dharman都有他的代码正确的想法。你只想添加另一个动画（类似于滚动），但最后加上一个超时（所以方法会不断重复）

Answer 3

因为我无法接受任何人的回答因为我不喜欢他们但是感谢bounce动画确实有效的想法...... 现在我已经创建了自己的Fiddle并且它很快就完成了！

$('button').click(function () {
    var c = $(this).attr('class');
    var div = $('div.' + c);
    $('html, body').animate({
        scrollTop: div.offset().top
    }, 1000); //thanks to Dylan Corriveau
    console.log(div.position().left);
    $('.log').css({
        top: div.position().top + div.height() / 2,
        left: div.position().left + div.width() + 50
    }).show();
    clearTimeout(inter);
    setTimeout(bounceOn, 500);

});

$('.log').mouseover(function () {
    clearTimeout(inter);
}).mouseout(function () {
    $(this).fadeOut(3500);
});

var inter;
//here is the magic!
function bounceOn() {
    var pos = $('.log').position().left;
    $('.log').animate({
        left: pos + 15
    }, 50, function () {
        $('.log').animate({
            left: pos
        }, 50)
    })
    inter = setTimeout(bounceOn, 215);
}

Stackoverflow就像错误显示一样

3 个答案:

摇摇欲坠的影响