2

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

谢谢！！！

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

1 回答 1

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

.Demo：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);
  });
});​
于 2012-09-02T06:12:50.187 回答