jQuery的將內格向左

CSS：

#button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;} 
#button-top:hover, #button-bottom:hover {cursor: pointer;} 
.slide { position: relative; height: 100px; overflow: hidden; width: 350px; } 
.slide img {position: relative; z-index: 100;} 
.slide p {width: 80px; padding:8px 16px; color: #fff; margin: 0; } 
.innerTop, .innerBottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; } 

#button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;}

SCRIPT：

$('#button-top').click(function() { 
    $('.innerTop').toggle('slide'); 
}); 
$('#button-bottom').click(function() { 
    $('.innerBottom').toggle('slide');  
});

HTML：

<div class="hide-mobile" id="button-top"> 
[IMG] 
<div class="slide innerTop"><p>HIDDEN SLIDING CONTENT</p></div> 
</div> 

<div class="hide-mobile" id="button-bottom"> 
[IMG] 
<div class="slide innerBottom"><p>HIDDEN SLIDING CONTENT</p></div> 
</div>

我想藍色內部div從右側滑動到左側。

來源

2013-07-22 Phantasmix

你可以試試這個教程更好的結果爲 http://www.themeswild.com/read/slide-navigation-left-to-right –

它可以很容易地使用動畫功能來完成。這裏是解決方案：

$('#button-top').toggle(function() { 
    $('.innerTop').animate({'left':'3px'}); 
}, function() { 
$('.innerTop').animate({'left':'103px'}); 
}); 


$('#button-bottom').toggle(function() { 
    $('.innerBottom').animate({'left':'3px'}); 
}, function() { 
$('.innerBottom').animate({'left':'103px'}); 
});

http://jsfiddle.net/nAaMV/6/

來源

2013-07-24 04:29:02

哈里斯，謝謝，但隨後藍色div在按鈕右側變得可見。這是我原來的問題的一部分。有沒有辦法只顯示藍色的div，一旦它到達按鈕的左側？ – Phantasmix

這幾乎是完美的。我在想 - 可以將動畫和淡入淡出結合起來嗎？所以當它回到正確的時候，藍色標籤就會消失。 – Phantasmix

在這個頁面上的滑動效果做我需要的：http://veselov.sumy.ua/uploads/files/demo/020/test.htm 但我不知道如何適應我的2個按鈕實例 – Phantasmix

你可以這樣做：

// Set the options for the effect type chosen 
var options = { direction: 'right' }; 

// Set the duration (default: 400 milliseconds) 
var duration = 700; 

$('#button-top').click(function() { 
     $('.innerTop').toggle('slide', options, duration); 
}); 
$('#button-bottom').click(function() { 
     $('.innerBottom').toggle('slide', options, duration);  
});

請務必包括jQuery UI文件在你的代碼，就像我已經包含在撥弄
（請參閱右側中檢查的jQuery UI 1.9.2複選框）。

FIDDLE DEMO #1或FIDDLE DEMO #2

來源

2013-07-24 08:59:03

jQuery的將內格向左

回答

相關問題