将 div 动画到 jQuery 中的特定位置

Posted 2023-05-08

【中文标题】将 div 动画到 jQuery 中的特定位置

【英文标题】：Animate div to specific position in jQuery

【发布时间】：2015-01-01 21:39:54

【问题描述】：

我想将 div ('.fadeToggleKastje2') 动画到特定位置。具体来说：“.highlight_animatie_kast2”的位置。

问题是它不会对'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

【问题讨论】：

如果你知道你想要元素在哪里结束，你可能会发现只使用 CSS 过渡而不是动画更简单。

您在fadeToggleKastje1 中也有错字，cursor: position: relative; 无效。

【参考方案1】：

添加

位置：相对；

到

.fadeToggleKastje2