使用数据属性减少标记

我有两个几乎相同的动画......它们之间的区别是“左对右”定位。我想为.forward和.backward重用第一块代码...我猜这可以通过使用HTML 5数据属性或可能的变量来完成，但我不知道如何去做那件事。使用数据属性减少标记

.hover-area { position:relative; width:100%; height:50px; } 
    .backward, .forward { position:absolute; } 
    .backward{ left:0px; } 
    .forward { right:0px; } 


    <div class="hover-area"> 
     Hover Area 
     <div class="backward" data-animate-on='{"left":"20"}' data-animate-off='{"left":"0"}'>Previous</div> 
     <div class="forward" data-animate-on='{"right":"20"}' data-animate-off='{"right":"0"}'>Next</div> 
    </div> 


    $('.forward').css({opacity:0, right:0}); 
    $('.hover-area').hover(function() { 
     $(this).find('.forward').stop() 
      .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'}) 
      .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'}); 
    },function() { 
     $(this).find('.forward').stop() 
      .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'}) 
      .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'}); 
    }); 




    $('.backward').css({opacity:0, left:0}); 
    $('.hover-area').hover(function() { 
     $(this).find('.backward').stop() 
      .animate({left:20}, {queue:false, duration:300, easing:'easeOutCubic'}) 
      .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'}); 
    },function() { 
     $(this).find('.backward').stop() 
      .animate({left:0}, {queue:false, duration:550, easing:'easeOutSine'}) 
      .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'}); 
    });

来源

2012-09-01 Taylor

使用.data()函数来获取数据的属性，并利用它们在.animate()：

$('.backward,.forward').css({opacity:0, right:0}); 
    $('.hover-area').hover(function() { 
     $(this).find('.backward,.forward').stop() 
      .animate($(this).data("animate-on"), {queue:false, duration:300, easing:'easeOutCubic'}) 
      .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'}); 
    },function() { 
     $(this).find('.backward,.forward').stop() 
      .animate($(this).data("animate-off"), {queue:false, duration:550, easing:'easeOutSine'}) 
      .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'}); 
    });

这里有一个DEMO

来源

2012-09-01 02:57:20

它只是淡入和淡出...它也需要转变，从左至右反之亦然......感谢您的帮助！ – Taylor

这似乎是一个很好的候选人CSS3转换。动画。添加单个类forward或backward，但不包含所有数据属性，并使用CSS指定动画属性。

.goforward { 
    left: 20px; 
    transition-property: left; 
    transition-duration: 3s; 
}

然后，只需添加/删除类开始动画：

$(".forward").addClass("goforward");

演示：http://jsfiddle.net/EMUcV/1/

来源

2012-09-01 02:59:15 McGarnagle

一旦我记得供应商的前缀，我意识到这不完全是一个*快捷键*。但是，如果您使用Sass或其他CSS编译器，每个人都应该这样做！ – McGarnagle

使用数据属性减少标记

回答

相关问题