2

私はここに新しいです。基本的な JQuery を使用していますが、問題が発生しています。サイトで、マウスをホバーすると、ボックス内の矢印の形が数ピクセル左に移動し、マウスを離すと元に戻るボックスを見たことがありますか? とにかく、コードivが思いついたので、マウスオーバー効果は正常に機能しますが、マウスアウトは矢印を元の位置に戻していません。実際、ホバリングすればするほど、矢印は左に移動します。

あなたの多くは私が行っている効果を見たことがあるに違いありませんが、私はそれを最善の方法で設定していないと感じています. 誰でも助けることができますか？自力でここまでたどり着きました。ちょっと立ち往生。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style type="text/css">

#red {
    height: 80px;
    width: 200px;
    background-color: #df0000;
    float: left;
    position: absolute;
    z-index: 998;
    display: none;
    left: 0px;
    top: 0px;
}
#gray {
    height: 80px;
    width: 200px;
    background-color: #232323;
    float: left;
    position: absolute;
    z-index: 997;
    left: 0px;
    top: 0px;
}
#wording{
    height: 80px;
    width: 200px;
    float: left;
    position: absolute;
    z-index: 999;
    left: 0px;
    top: 0px;
    background-image: url(getit.png);
    background-repeat: no-repeat;
}
#wrap {
    height: 80px;
    width: 200px;
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -40px;
    margin-left: -100px;
}

#arrow {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #df0000;
    position: absolute;
    top: 50%;
    right: 15px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#wording').mouseenter(function(){
  $('#red').animate({'width': 'toggle'});
    $('#arrow').css('color','white');
     $('#arrow').delay(100).animate({'left': '-=3px'}, "fast"); 
});


$('#wording').mouseleave(function(){
  $('#red').animate({'width': 'toggle'});
    $('#arrow').css('color','red');
      $('#arrow').delay(100).animate({'right': '+=3px'}, 'fast');
});


});

</script>

</head>

<body>

<div id="wrap">

<div id="wording">
<div id="arrow">></div>
</div>
<div id="red"></div>
<div id="gray"></div>

</div>

</body>

</html>
4

2 に答える 2

2

いいえ：

$('#arrow').delay(100).animate({'left': '-=3px'}, 'fast');

しかし：

$('#arrow').delay(100).animate({'right': '-=3px'}, 'fast');

スクリプトは次のようにすることもできます：

$(document).ready(function() {
    var $red   = $('#red');
    var $arrow = $('#arrow');
    $('#wording').hover(
      function() {
        $red.animate({'width': 'toggle'});
        $arrow.css('color', 'white').delay(100).animate({'right': '-=3px'}, "fast");
      }, function() {
        $red.animate({'width': 'toggle'});
        $arrow.css('color', 'red').delay(100).animate({'right': '+=3px'}, 'fast');
     });
});​

デモ: http://jsfiddle.net/jqrET/1/

于 2012-05-17T21:18:10.563 に答える
0

左に-3、右に+3移動するので考えています。右に移動してみてください-3。それが機能するかどうかを確認します。

于 2012-05-17T21:20:33.557 に答える