Question

我想将div（＆＃39; .fadeToggleKastje2＆＃39;）设置为特定位置的动画。具体来说：＆＃39; .highlight_animatie_kast2＆＃39;的位置。

问题在于它不会对＆＃39; right: '+=50px＆＃39;做出反应，其他属性也有效。

这是代码的（部分）：

    $(".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

Answer 1

只需添加

的位置是：相对于;

到

.fadeToggleKastje2

将div设置为jQuery中的特定位置

1 个答案: