你如何讓jquery上下滑動而不扭曲形狀？

你如何將物體向上滑動，好像它隱藏在某物後面，而不是彎曲。你如何讓jquery上下滑動而不扭曲形狀？

在演示的jsfiddle，你可以看到圓形彎曲平，因爲它幻燈片，但我想它滑出如同其背後隱藏的東西。（可惜我不能只是把圖像或分度，相同的背景顏色在圈子並有圓下方向上滑動。）

HTML

<div class="button">Hover</div> 
<div class="box"> 
    Sliding down! 
</div>

jQuery的

$('.box').hide(); 
$('.button').hover(
    function() { 
     $('.box').slideToggle('slow'); 
    } 
);

更新： 你們有非常好的答案！但我發現其中一個解決方案： http://jsfiddle.net/7fNbM/36/ 我決定使用animate（）效果，只是將.button div和.box div包裝在一個容器中，並給容器一個特定的高度，特定的寬度以及隱藏的溢出。這樣我就不必在背景中覆蓋圖像，它提供了我正在尋找的效果。

更新，再次： 我剛剛發現，你可以很容易地使用jQuery UI效果稱爲盲。

來源

2013-06-27 anita

它彎曲的原因是因爲你使用的slideToggle從而改變物體的高度讓它滑回去。你想要做的是製作一個對象，說你的圈子。而不是使用slideToggle爲高度設置動畫效果，而是要將位置設置爲動畫，以將其隱藏在屏幕之外或另一個對象之後。

東西向的延伸：

$('.button').hover(
     function() { 
      $('.box').stop().animate({top:40}, 800); 
     }, function(){ 
      $('.box').stop().animate({top:-180}, 800); 
     } 
    );

小提琴鏈接：http://jsfiddle.net/7fNbM/17/

來源

2013-06-27 01:39:52 JanR

這很接近，但是.box和.button在頁面的中心位置？你仍然可以看到.box。 HTTP：//的jsfiddle。net/7fNbM/21/ – anita

如果它位於頁面的中心，只需添加另一個div來隱藏背景。 – JanR

試試這個更新的小提琴：http://jsfiddle.net/7fNbM/22/ – JanR

你需要添加一個包裝的盒子這樣

<div class="button">Hover</div> 
<div class="container"> 
    <div class="box"> 
    Sliding down! 
    </div> 
</div>

和JavaScript

$('.container').hide(); 
    $('.button').hover(
     function() { 
      $('.container').slideToggle('slow'); 
     } 
    );

來源

2013-06-27 01:32:12

http://jsfiddle.net/7fNbM/28/這會是什麼你talkinga有關的權利？但這個圈子實際上並沒有移動，這並不是完全相同的效果。 – anita

不，看看這個[小提琴]（http://jsfiddle.net/kenfly51/4sJrn/） –

抱歉，我提供的鏈接是錯誤的，我只是將其替換。但是那正是我所說的，.box實際上並沒有移動。 – anita

這裏：http://jsfiddle.net/7fNbM/20/

$('.button').mouseenter(
     function() { 
      $('.box').stop(); 
      $('.box').animate({top: 50, left:0}, 400); 
    } 
    ).mouseleave(
     function() { 
      $('.box').stop(); 
      $('.box').animate({top: -180, left:0}, 400); 
    } 
    );

來源

2013-06-27 01:54:30 Romeo

如果你想要把按鈕上的圖像的頂部，怎麼樣這個？

入住這裏，DEMO http://jsfiddle.net/yeyene/MW5Gq/1/

$('.button').hover(
    function() {    
     $('.box').stop().animate({'top':'50','opacity':'1'}, 800); 
    }, function(){ 
     $('.box').stop().animate({'top':'-125','opacity':'0'}, 800);   
    }  
);

來源

2013-06-27 03:18:19 yeyene

不是我一直在尋找的效果，但感謝您的幫助！我解決了這個問題:) – anita

你如何讓jquery上下滑動而不扭曲形狀？

回答

相關問題