重叠动画

Question

理想的结果 当点击两个图像中的一个（id“kast1”和“kast2”）时，需要启动一个高亮显示（.highlight_animatie_kast fadeIn和fadeOut）。通过单击突出显示，图像（“kast1”）需要移动（动画）到突出显示的位置。其他图像（“kast2”）也是如此。

问题： 点击两个图像时，闪亮的高光动画重叠，这会导致另一个问题。另一个问题是（在点击两个图像后）点击高亮时图像将向右移动但之后它再次移出屏幕 - 因为重叠的高光动画 - 。

Demo

jQuery的：

    var isFadingIn1 = false
var isFadingIn2 = false

$(document).ready(function () {

    $(".highlight_animatie_kast1").hide()
    $(".highlight_animatie_kast2").hide()

    function highlight1() {
        $('.highlight_animatie_kast1').fadeIn('slow')
        $('.highlight_animatie_kast1').fadeOut('slow', highlight1)
    }

    //1ste knop 

    $("#kast1").on("click", function () {
        if (!isFadingIn1) {
            isFadingIn1 = true
            $('.fadeToggleKastje1').addClass("fadeToggleActief")  
            $(".highlight_animatie_kast2").hide()
            $('.highlight_animatie_kast2').stop(true, true)

            if (isFadingIn2){
                $('.fadeToggleKastje2').removeClass("fadeToggleActief")
                $('.fadeToggleKastje1').addClass("fadeToggleActief")  
                $(".highlight_animatie_kast2").hide()
                $('.highlight_animatie_kast2').stop(true, true)
            }

            var $highlight1 = $(".highlight_animatie_kast1")
            $highlight1.one("click", function () {

                  var imageDiv = $( "#kast1" )

                  imageDiv.children("img").animate({
                      right: '+=270px'
                  }, 1500 )      
            })

            $highlight1.fadeToggle("slow", function () {
                $('.highlight_animatie_kast1').fadeIn('slow')
                $('.highlight_animatie_kast1').fadeOut('slow', highlight1)
            })

        } else {
            $('.highlight_animatie_kast1').stop(true, true)
            $(".highlight_animatie_kast1").hide()
            isFadingIn1 = false  
            $('.fadeToggleKastje1').removeClass("fadeToggleActief")
        }
    })

    //2de knop 

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

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

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

            var $highlight2 = $(".highlight_animatie_kast2")

            $highlight2.one("click", function () {

                  var imageDiv = $( "#kast2" )

                  imageDiv.children("img").animate({
                      right: '+=180px'
                  }, 1500 )
            })

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

        } else {
            $('.highlight_animatie_kast2').stop(true, true)
            $(".highlight_animatie_kast2").hide()
            isFadingIn2 = false
            $('.fadeToggleKastje2').removeClass("fadeToggleActief")
        }
    })     

})

CSS：

  div {
      border: 1px solid yellow;
  }

  #highlight_posities {
      position: absolute;
      width: 280px;
      height: 200px;
      padding: 25px 20px 20px 100px;
      border: 1px solid #D3D3D3;
  }
  #eersteRijKast{
      position: relative;  
      top:20px;
      right:90px;
      width: 200px;
      height: 80px;
  }  
  .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;
  }

  #kast1 {
      position:relative;
      top:20px;  
  }

  #kast2 {
      position:relative;
      top:20px;
  }

  .fadeToggleKastje1 {
      position:relative;
      float: right;
      width: 80px;
      height: 80px;   
  }
  .fadeToggleKastje2  {
      position:relative;
      float: right;
      width: 80px;
      height: 80px;    
  }

  .image {
      position:relative;
      width: 80px;
      height: 80px; 
  }

  .fadeToggleActief {
      background-color:"yellow";
      border: 5px solid yellow;
  }

我知道代码不是那么稳定，但我希望它可以修改一些变化。

非常感谢任何帮助！