Анимация повторяется при событии .click

Question

Я пытаюсь выпустить серию div, которые были добавлены и анимированы дважды. Я могу это сделать, но я сфокусирован на том, как сделать все это повторяемо. Идея состоит в том, что щелкнут родительский div, 3 дочерних divs анимированы, они исчезают, и все начинается, когда родительский div снова нажат. Вот код:

$(document).ready(function(){  
$('#work').click(function(){ 

    $('body').append('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').done; 
    $('body').append('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').done; 
    $('body').append('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').done; 

    $('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){ 
     }); 
     }); 

     setTimeout (function(){ 
       $('#portfolio').fadeOut(200) 
       }, 4000); 
    }); 

    $('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){}); 
     }); 
    }); 

    $('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){}); 
     }); 
    }); 

    $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();}); 
    $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();}); 
    $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();}); 


    /*var timer;(document).mousemove(function(){ 
     if (timer) { 
      clearTimeout(timer); 
      timer = 0; 
      } 

      $('#portfolio').fadein(); 
      timer = setTimeout (function(){ 
       $('#portfolio').hide(200) 
       }, 300); 
     });*/ 

    }); 

Если есть дилетантские ошибки здесь, просто несите меня. Я довольно новичок в кодировании. Я пытался использовать таймер var, с которым я ранее не знаком. Это не имело никакого эффекта.

РЕДАКТИРОВАТЬ: Я исправил эту проблему, добавив строку, в которой все три поддиректории div являются дочерними элементами невидимого div, которые я назвал «subnav». Я позиционировал его так, чтобы он мог составлять соответствующее пространство для меню; элементы анимируются на .mouseleave.

Answer 1

Вы можете использовать .appendTo(), чтобы добавить свой новый div в тело и вставить сразу анимацию. Он должен работать.
Попробуйте это:

$(document).ready(function(){  
$('#work').click(function(){  
$('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){ 
      $(this).mouseenter(function(){ 
       $(this).animate({'opacity':1}, 100, function(){}); 
      }); 
      $(this).mouseleave(function(){ 
       $(this).animate({'opacity':.6}, 100, function(){ 
      }); 
      }); 

      setTimeout (function(){ 
        $('#portfolio').fadeOut(200) 
        }, 4000); 
     }); 

     $('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){ 
      $(this).mouseenter(function(){ 
       $(this).animate({'opacity':1}, 100, function(){}); 
      }); 
      $(this).mouseleave(function(){ 
       $(this).animate({'opacity':.6}, 100, function(){}); 
      }); 
     }); 

     $('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').appendTo('body').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){ 
      $(this).mouseenter(function(){ 
       $(this).animate({'opacity':1}, 100, function(){}); 
      }); 
      $(this).mouseleave(function(){ 
       $(this).animate({'opacity':.6}, 100, function(){}); 
      }); 
     }); 

     $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();}); 
     $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();}); 
     $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();}); 


     /*var timer;(document).mousemove(function(){ 
      if (timer) { 
       clearTimeout(timer); 
       timer = 0; 
       } 

       $('#portfolio').fadein(); 
       timer = setTimeout (function(){ 
        $('#portfolio').hide(200) 
        }, 300); 
      });*/ 

     }); 

Answer 2

Вы добавление ссылки при каждом нажатии кнопки. Один из способов - удалить их при каждом щелчке, если они уже присутствуют. Хотя это не очень хорошая идея, но она работает.

JQuery

$('#work').click(function(){ 
    $('#portfolio').parent('a').remove(); 
    $('#sketchbook').parent('a').remove(); 
    $('#art').parent('a').remove(); 

    $('body').append('<a href="Portfolio/index_portfolio.html"><div id="portfolio"><p>portfolio</p></div></a>').done; 
    $('body').append('<a href="Sketchbook/index_sketchbook.html"><div id="sketchbook"><p>sketchbook</p></div></a>').done; 
    $('body').append('<a href="Art/index_art.html"><div id="art"><p>art</p></div></a>').done; 

    $('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':.6}, 500, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){ 
      }); 
     }); 

     setTimeout (function(){ 
      $('#portfolio').fadeOut(200) 
     }, 4000); 
    }); 

    $('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':.6}, 550, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){}); 
     }); 
    }); 

    $('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'.6'}, 600, function(){ 
     $(this).mouseenter(function(){ 
      $(this).animate({'opacity':1}, 100, function(){}); 
     }); 
     $(this).mouseleave(function(){ 
      $(this).animate({'opacity':.6}, 100, function(){}); 
     }); 
    }); 

    $('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600, function(){$(this).remove();}); 
    $('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550, function(){$(this).remove();}); 
    $('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500, function(){$(this).remove();}); 
});