使用margin-attribute爲mouseover/mouseout上的變形div製作動畫

我想知道是否有人有辦法解決我遇到的問題。我用腳本和測試服務器混合的不同代碼進行了很多實驗，但他們不幫助我，因爲我想移動一個內部跨度的轉換後的div，這個轉換的div只在加載時向站點左側的對角線，然後進入懸停的站點，但仍然只有一個懸停，所以這個人應該搬出去，同時用鼠標箭頭離開熱區。
我不知道如何組合一個函數中的類，我可能會調用load。我附上我的CSS和HTML，以防萬一有人遇到問題。使用margin-attribute爲mouseover/mouseout上的變形div製作動畫

我雖然關於像左移動它們左邊的動畫和他們的邊緣動畫 - 左邊的權利！

這是我想出來的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 */}

來源

2012-09-25 Michael Schwark

只是注意：不要在網頁上使用相同的名稱的多個ID，這就是類的。所以'

....

' –

啊，很明顯，對，杜德。我只是在工作中編寫了一個我心目中的計劃，並且對css的要求很苛刻。我想在劇本中應該有可能針對bgrclub div並與課堂合作。 –

，你可以把它定義成

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

，你可以改變所有的CSS屬性，在懸停事件：

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

或

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

，讓您的結果等。

來源

2012-09-25 21:10:01 chokrijobs

這是例子，你可以恰克速度（500）

$("#bgrclub").animate({ 

    right: '0' 
    }, 500, function() { 
    // Animation complete. 
     $(this).css('margin-left', '300'); 
     /* 
     *and you do many other thing here 
     */ 
    });

來源

2012-09-25 20:47:56 chokrijobs

，看起來不錯，反射到結構輕微的東西，我有，但不幸的是，當我在加載時調用它，它不會觸發任何懸停效果。我不得不以目標#bgrclub爲目標。優點{position：relative; width：755px; float：left;填充頂：40像素; -moz變換：旋轉（-20deg）;/* Firefox 3.6 Firefox 4 */- webkit-transform：rotate（-20deg）;/* Safari */- o-transform：rotate（-20deg）;/* Opera */- ms-transform：rotate（-20deg）;/* IE9 */transform：旋轉（-20deg）;/* W3C * /} 現在？我也必須在鼠標懸停中包裝它，不是嗎？也許我完全誤導了:-)！ –

我編輯我的帖子，以顯示我想出了什麼。不過，它直接向右移動，這不是我想要的:(。 –

THX，鄉親們！我得到它的工作exactely由我想要的方式：

<!-- 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-25 21:58:30

使用margin-attribute爲mouseover/mouseout上的變形div製作動畫

回答

相關問題