CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Taylor
Taylor

Reputation: 93

Is there a cleaner way with data-attribute

Wonder if their is a cleaner way of structuring this code?? I was hoping to use data-attributes for the left and right values of the back and forward buttons.

THANKS!!!

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

Upvotes: 2

Views: 172

Answers (1)

Danil Speransky
Danil Speransky

Reputation: 30473

  1. You can combine your functions and run them together.
  2. Then you can store similar config of animation in variables and use them then.
  3. To get info of animation you can use just $(el).data('animate-on'), it will return object.
  4. Also you can use jQuery.each, because what you do with buttons are very similar.

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

Upvotes: 3

Related Questions