jquery - 数据属性和错误的逻辑（我的逻辑）

Question

我想在 aa project 上使用数据属性，但似乎我的逻辑不是逻辑......

所以，这就是我正在尝试的：

http://jsfiddle.net/vPh7S/

这是我在 jquery 中的逻辑：

var a = $('#haus').find('article');
var haus = $('#haus');


function startBubbles() {
    var item = a;
    var dataId = item.data('id');
    var dataTop = item.data('data-top');
    var dataDuration = item.data('data-duration');

    $(dataId).animate({
        top: dataTop
    }, dataDuration);

    // $('#a1').animate({top:'5%'},500,'easeOutBounce');
    // $('#a2').animate({top:'50%'},550,'easeOutBounce');
    // $('#a3').animate({top:'50%'},600,'easeOutBounce');
    // $('#a4').animate({top:'60%'},650,'easeOutBounce');
    // $('#a5').animate({top:'80%'},700,'easeOutBounce');
    // $('#a6').animate({top:'26%'},750,'easeOutBounce');

}

startBubbles();

Answer 1

给你：http: //jsfiddle.net/vPh7S/2/

function startBubbles() {
    $('#haus > article').each(function () {
        $(this).animate({
            top: parseInt($(this).data('top'))
    }, $(this).data('duration'));
});
startBubbles();

您使用的.data()功能错误。它已经知道有一个data-前缀，所以它的工作方式如下：$('#id').data('top')而不是$('#id').data('data-top').

您还选择了多个元素 ( <article>)，但将它们视为一个元素。我使用该.each()函数遍历每个元素并按照您的意图对其进行动画处理。