数据属性有没有更干净的方法

Is there a cleaner way with data-attribute

本文关键字：方法有没有数据属性更新时间：2023-09-26

想知道他们是否是构建此代码的更干净的方式？？我希望对后退和前进按钮的左值和右值使用数据属性。

谢谢！！！

.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'
     });
 });

您可以组合您的功能并一起运行它们
然后，您可以将类似的动画配置存储在变量中，然后使用它们
若要获取动画信息，只需使用$(el).data('animate-on')，它就会返回对象
您也可以使用jQuery.each，因为您对按钮所做的操作非常相似

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

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