0

誰かが私が抱えている問題を解決するためのアプローチを持っているのだろうか. スクリプトとテストサーバーから混合したさまざまなコードで多くの実験をしましたが、それらは役に立ちません。なぜなら、テキストを保持する内部スパンを持つ変換された div を、ロード時にサイトから左斜めに少しだけ移動したいからです。 、ホバーでサイトに移動しますが、ホバーしたのは1つだけなので、マウスの矢印でホットエリアを離れながら、このサイトを移動する必要があります。
ロード時に呼び出す可能性のある関数でクラスを組み合わせる方法についての手がかりがありません。誰かがすでに何らかの問題を抱えている場合に備えて、css と html を添付します。

margin-left で左に移動し、margin-left で右にアニメーション化するようなことを考えました!

これは私が思いついたjqueryですが、私が望んでいることはできません。それは、物を動かしたい角度で斜めではなく、まっすぐ左/右に動かします:

<script type="text/javascript">
        $(function() {
            $('#bgrclub .advantages').hover(
                function () {
                    var $this = $(this);
                    $this.stop().animate({'margin-left':'400px'},500);
                    $('#bgrclub .advantages',$this).stop(true,true).fadeOut(1500);

                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'margin-left':'95px'},1000);
                    $('#bgrclub .advantages',$this).stop(true,true).fadeIn();
                }
            );
        });


        </script>


    <div id="bgrclub">
    <div class="advantages"><span>A proper solution</span></div>
    <div class="advantages"><span>would have to work</span></div>
    <div class="advantages"><span>with differently</span></div>
    <div class="advantages"><span>long text spand</spa></div>
    <div class="advantages"><span style="padding-left:250px;">Random Text Span</span></div>
<div class="advantages"><span style="padding-left:435px;">A really, really, really long text span</span></div>
</div>

CSS:

#bgrclub {background-image:url(../images/club_bgr.jpg);background-repeat:no-repeat;width:755px;height:544px;}
#bgrclub_bottompics {background-image:url(../images/club_bgr_bottompics.jpg); position:absolute; bottom:0px; left:0px;background-repeat:no-repeat;width:755px; height:95px; z-index:999;}
#bgrclub .advantages {position:relative;width:755px;float:left; padding-top:40px;-moz-transform:rotate(-20deg); /* Firefox 3.6 Firefox 4 */-webkit-transform:rotate(-20deg); /* Safari */-o-transform:rotate(-20deg); /* Opera */-ms-transform:rotate(-20deg); /* IE9 */transform:rotate(-20deg); /* W3C */}
#bgrclub .advantages span {font-family: 'Open Sans Condensed', sans-serif;font-size:175%; font-weight:lighter; color:#373737;padding:10px; padding-left:125px; margin-left:-150px; border-bottom-right-radius:10px; border-top-right-radius:20px; z-index:1000;
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 23%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(23%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */}
4

3 に答える 3

1

これは例で、速度を変更できます (500)

$("#bgrclub").animate({

    right: '0'
    }, 500, function() {
    // Animation complete.
       $(this).css('margin-left', '300');
      /*
       *and you do many other thing here
      */
  });
于 2012-09-25T20:47:56.760 に答える
1

あなたはそれを定義することができます

$(document).ready(function () {
/**
* your code
*/
});

ホバーイベントですべての css 属性を変更できます。

$(#your_div).css('float', 'left');

また

$("#your_div").css('float', 'right');
$("#your_div").css('position', 'relative');

あなたの結果などを得るために..

于 2012-09-25T21:10:01.133 に答える
0

Thx、皆さん！私はそれを私が望むように正確に動作させました：

<!-- Hovering in the Advantages -->
        <script type="text/javascript">
            $(function() {
                $('#bgrclub .advantages span').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'margin-left':'-10'},2000);
                        $('#.advantages',$this).stop(true,true).fadeOut(2500);

                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'margin-left':'-150px'},2000);
                        $('#.advantages',$this).stop(true,true).fadeIn();
                    }
                );
            });


        </script>
于 2012-09-25T21:58:30.227 に答える