将动画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中的特定位置

回答

相关问题