jQuery的背景顏色「動畫」

我試圖創建一個簡單的動畫，其中的背景顏色滑入到位。到目前爲止，它是成功的，但有一個主要問題：塊上的文本移動，我無法弄清楚如何阻止它。jQuery的背景顏色「動畫」

我可以定位上面的文本，但我需要改變顏色，如果我在jQuery中這樣做，它會創建一個混亂。

的CSS：

.button { 
    display: block; 
    width: 130px; 
    height: 40px; 
    cursor: pointer; 
    position: fixed; 
    z-index: 1; 
    top: 15px; 
    left: 15px; 
    text-align: center; 
    color: #FFF; 
    overflow: hidden; 
    text-decoration: none; 
    font-size: 23px; 
    text-transform: lowercase; 
    font-family: Helvetica, Arial, sans-serif; 
    background: #FFF 
} .button:hover { color: #FFF } 
.button h1 { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 130px; 
    height: 40px; 
    font-size: 23px; 
    margin: 0; 
    background-color: blue 
} 
.button h1.back { 
    z-index: 999; 
    color: #000; 
    margin-left: -130px; 
    overflow: hidden; 
    background-color: red 
} 
.button h1 span { 
    position: absolute; 
    left: 0; 
    top: 10%; 
    width: 130px; 
    height: 40px; 
    text-align: center 
}

然後jQuery的：

$('.button').hover(function() { 
    var el = $(this); 
    el.children('.back').animate({ 
     marginLeft: '0' 
    }, 30, 'swing'); 
}, function() { 
    var el = $(this); 
    el.children('.back').animate({ 
     marginLeft: '-130px' 
    }, 30, 'swing'); 
});

它創造了一個偉大的動畫。但是文字，它隨着它滑動。我怎樣才能防止這種沒有毛病顏色變化？

這裏是的jsfiddle：http://jsfiddle.net/WERFJ/

來源

2011-10-11 Talasan Nicholson

兩件事情：

http://jsfiddle.net/WERFJ/13/它可能需要一些調整，但是這是你後的效果。基本上我只是把文本從h1中取出，並在其上放置了一個z-index，所以它始終在前面，然後用.button:hover span { color: #000 }
使用h1's來做到這一點不是h1的正確用法。我只會使用普通的div。

來源

2011-10-11 01:53:07 bricker

工作，謝謝。 –

你可以把文字上，這只是層：

<a href="#" class="button"> 
    <h1 class="front"><span></span></h1> 
    <h1 class="back"><span></span></h1> 
    <h1 class="text"><span>hello</span></h1> 
</a>

http://jsfiddle.net/WERFJ/14/

也許與完整的文本效果：

$(function() { 
    var $text = $('.text'); 
    $('.button').hover(function() { 
     $(this).children('.back').animate({ 
      marginLeft: '0', 
     }, 100, 'swing', function(){ 
      $text.css('color','white'); 
     }); 
    }, function() { 
     $(this).children('.back').animate({ 
      marginLeft: '-130px' 
     }, 100, 'swing', function(){ 
      $text.css('color','black'); 
     }); 
    }); 

});

http://jsfiddle.net/WERFJ/17/

兩

來源

2011-10-11 01:51:48

jQuery的背景顏色「動畫」

回答

相關問題