使用數據屬性減少標記

我有兩個幾乎相同的動畫......它們之間的區別是「左對右」定位。我想爲.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

使用數據屬性減少標記

回答

相關問題