在過渡效果，幫助通過CSS3或JS或jQuery的

我想改變這一局面的背景圖像，同時移動到另一個我的圖片文件夾這樣example 這是我的代碼在過渡效果，幫助通過CSS3或JS或jQuery的

CSS

.image { 

    position: relative; 
     overflow: hidden; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
     opacity:1; 
filter:alpha(opacity=100); 

} 
.image:hover { 

     opacity:0; 
filter:alpha(opacity=0); 
    -moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); 
    -webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); 
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0% 
    background-color:#36F; 

    }

HTML

<div id="image_holder_1" class="image_holder"> 
    <img id="image_1" class="image" src="images/esu.gif" /> 
</div>

來源

2011-03-11 john

jQuery.cycle是你的答案。

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('.image_holder').cycle({ 
       fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
    }); 
</script>

您應該刪除「形象」標識和圖像元素應該包含你的「image_holder」包含鏈接到您想要的圖像週期（過渡）通過內。那麼你的HTML會是這個樣子：

<div id="image_holder_1" class="image_holder"> 
     <img src="images/esu.gif"/> 
     <!-- Your other image source(s) goes here --> 
</div>

如果你的圖像轉換的工作，你有你的CSS喜歡的方式，使用的CSS過渡，並省略了jQuery的過渡類型。這是通過使用jQuery.cycle可能對您有用的不同轉換的鏈接。 jQuery.cycle transitions

來源

2011-06-17 15:54:10

在你的榜樣WOU的影響ld在CSS中無法實現，轉換動畫無法取消，因此每個動畫都必須在CSS中的鼠標懸停和鼠標懸停事件上完成。

來源

2011-03-11 16:56:30 JaredMcAteer

固定的，我放的代碼使除了改變圖像的效果最多，所以我怎麼能通過JS/jquery的最後一個效果？ – john 2011-03-11 17:00:31

在過渡效果，幫助通過CSS3或JS或jQuery的

回答

相關問題