jQueryアニメーションが1回のみ実行されるのはなぜですか？

ページをリロードせずにアニメーションを1回完了できるようになりました。同じ問題については同様の質問がありますが、マウスセンターで再発することはできません。前もって感謝します。jQueryアニメーションが1回のみ実行されるのはなぜですか？

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>My Practice Page</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 


    <style> 
     #root { 
      height: 100px; 
      width: 100px; 
      background-color: darkblue; 
      position: absolute; 
      margin: auto; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
     } 
    </style> 
</head> 

<body> 
    <div id="root"> 

    </div> 
    <script> 
     $(document).ready(function() { 

      $('#root').mouseenter(function() { 
       $(this).animate({ 
        'right': '200' 
       }); 
      }); 
      $('#root').mouseleave(function() { 
       $(this).animate({ 
        'left': '200' 
       }); 
      }); 
     }); 
    </script> 

</body> 

</html>

出典

2017-06-29 Booyah

サイクルが完了した後、左右の値を要素から削除する必要があるためです。これはCSSの遷移で簡単に達成することができます – karthick

達成しようとしていることを説明できますか？それをスライドさせたり、成長させようとしていますか？ – Soviut

次の2つの異なる特性、rightとleftをアニメーション化しています。それらは移動している方向ではなく、親コンテナの左右両側からどれだけ離れているかを表します。

あなたが今持っている方法は、これらの2つのプロパティを適用しており、決してそれらを削除しないことです。要素を引き出しのように滑らせようとしている場合は、leftプロパティにアニメーションを付けるだけで、mouseenterに200pxを追加し、をmouseleaveに戻して0pxに設定する必要があります。要素が拡大して見えるようにする場合は、代わりにwidthまたはrightをアニメーションする必要がありますが、mouseleaveの同じリセット手順に従ってください。

どのように！純粋なCSSのトランジションで簡単にやりたいことを達成するための簡単な方法です。アニメーションがよりスムーズにアニメーション化され、GPUが加速され、イージングカーブが異なり、アニメーションが完了する前にマウスが離されても適切にリセットされます。

.target { 
 
    padding: 10px; 
 
    background: cornflowerblue; 
 
    width: 50%; 
 
    
 
    /* the transition does all the work */ 
 
    transition: transform 500ms ease-in-out; 
 
} 
 

 
.target:hover { 
 
    /* use a transform for easier position movement */ 
 
    transform: translateX(200px); 
 
}

<div class="target">Hover over me</div>

出典

2017-06-29 21:38:35 Soviut

それはカーソルに従っているようですが、実際に彼はOPが望んでいるものですか？ – 11thdimension

カーソルの後にはありません。営業担当者はマウスオーバーで横にスライドしてから、離れるときにスライドインして戻したいと考えています。 – Soviut

同じ行の画面の前半にカーソルを移動してください。カーソルの後ろにカーソルがあります。 – 11thdimension

leftとright位置は常にお互いを上書きしませんので。他の1を観測することができる前に、あなたは1を削除する必要があります。

$('#root').mouseenter(function() { 
    $(this).css("left", ""); 
    $(this).animate({ 
     'right': '200' 
    }); 
}); 
$('#root').mouseleave(function() { 
    $(this).css("right", ""); 
    $(this).animate({ 
     'left': '200' 
    }); 
});

それとも、単に元の位置に戻したい場合は、あなただけ戻って0からright値を返すことができます：

$('#root').mouseenter(function() { 
    $(this).animate({ 
     'right': '200' 
    }); 
}); 
$('#root').mouseleave(function() { 
    $(this).animate({ 
     'right': '0' 
    }); 
});

出典

2017-06-29 21:41:39 Marquizzo

を'left': '200'の代わりに'right': '0'を使用してください。

<!DOCTYPE html> 
 
    <html lang="en"> 
 

 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>My Practice Page</title> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="master.js"></script> 
 

 
<style> 
 
#root { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: darkblue; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
</style> 
 
    </head> 
 

 
    <body> 
 
     <div id="root"> 
 

 
     </div> 
 
<script> 
 
$(document).ready(function() { 
 
    $('#root').mouseenter(function() { 
 
    \t \t $('#root').animate({ 
 
      'right': '200' 
 
     }); 
 
    }); 
 
    $('#root').mouseleave(function() { 
 
     $('#root').animate({ 
 
      'right': '0' 
 
     }); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 

 
</html>

次の2つの異なるものをアニメーション化しているので、これは動作します。

出典

2017-06-29 21:45:56 DecstarG

これは私が探していたものです！単純すぎます。ありがとうございました！ – Booyah

jQueryアニメーションが1回のみ実行されるのはなぜですか？

答えて

関連する問題