Question

我想在项目中使用数据属性，但似乎我的逻辑不是逻辑......

所以，这就是我想要的：

这是我在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()函数遍历每个元素并按照您的意图制作动画。

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

1 个答案: