將動畫div分配給jQuery中的特定位置

我想將div（'.fadeToggleKastje2'）動畫到特定位置。具體來說：'.highlight_animatie_kast2'的位置。將動畫div分配給jQuery中的特定位置

問題在於它不會對'right: '+=50px'做出反應，其他屬性可以工作。

這是代碼（的部分）：

$(".fadeToggleKastje2").on("click", function() { 
    if (!isFadingIn2) { 
     isFadingIn2 = true 
     $('.fadeToggleKastje2').addClass("fadeToggleActief") 
     $('.highlight_animatie_kast1').stop(true, true) 

     if(!!isFadingIn1){ 
      $('.fadeToggleKastje1').removeClass("fadeToggleActief")             
      $('.fadeToggleKastje2').addClass("fadeToggleActief") 
      $('.highlight_animatie_kast1').stop(true, true); 
     } 

     var $highlight2 = $(".highlight_animatie_kast2") 
     $highlight2.one("click", function() { 
       $(".fadeToggleKastje2").animate({ 
        opacity: 0.4, 
        right: '+=50px' 
       }, 'slow') 
     }) 

     $highlight2.fadeToggle("slow", function() { 
      $('.highlight_animatie_kast2').fadeIn('slow') 
      $('.highlight_animatie_kast2').fadeOut('slow', highlight2) 
     })

HTML：

<button class="fadeToggleKastje1"></button> 
<button class="fadeToggleKastje2"></button> 
<div id="highlight_posities" class="hide"> 
    <div class="highlight_animatie_kast1"></div> 
    <div class="highlight_animatie_kast2"></div> 
</div>

CSS：

 .highlight_animatie_kast1 { 
     position: relative; 
     top: 30%; 
     left: -7%; 
     width: 10px; 
     height: 10px; 
     font-size: 36px; 
     background: yellow; 
     box-shadow: 0px 0px 40px 20px yellow; 
    } 
    .highlight_animatie_kast2 { 
     position: relative; 
     top: 30%; 
     left: -7%; 
     width: 10px; 
     height: 10px; 
     font-size: 36px; 
     background: yellow; 
     box-shadow: 0px 0px 40px 20px yellow; 
    } 
    .fadeToggleKastje1 { 
     cursor: position: relative; 
     background-image: url(http://i.imgur.com/yCJqWOx.jpg?1); 
     width: 80px; 
     height: 80px; 
    } 
    .fadeToggleKastje2 { 
     position: relative; 
     background-image: url(http://i.imgur.com/1qaWScA.jpg?1); 
     width: 80px; 
     height: 80px; 
    }

Broken demo

來源

2014-11-05 Koudwater

如果你知道你想要的元素結束了，你會發現它更簡單，只需使用CSS過渡，而不是動畫。 – 2014-11-05 16:06:09

您在'fadeToggleKastje1''遊標中還有一個錯字：cursor：position：relative;'無效。 – 2014-11-05 16:10:55

只需添加

位置：相對;

到

.fadeToggleKastje2

來源

2014-11-05 16:06:02

將動畫div分配給jQuery中的特定位置

回答

相關問題