Question

想知道他们是否更简洁地构建此代码？我希望将数据属性用于后退和前进按钮的左右值。

感谢!!!

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

Answer 1

您可以将功能组合在一起运行。
然后你可以在变量中存储类似的动画配置，然后使用它们。
要获取动画信息，只需使用$(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);
  });
});

是否有更简洁的数据属性方式

1 个答案: