[英]onclick function fade in fade out content carousel
晚間,
我在使用onclick淡入和淡出某些內容的動畫時遇到麻煩,這是導航的html腳本:
<div class="col s12 m4">
<h4 class="pict-menu"><a href="#!" id="type1" class="waves-effect waves-default">type1</a></h4>
<h4 class="pict-menu"><a href="#!" id="type2" class="waves-effect waves-default">type2</a></h4>
</div>
這就是內容
<div class="col s12 m8 owl-carousel owl-theme" id="type-1">
<?php foreach($regent as $row): ?>
<div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>admin/assets/images/media/<?php echo $row->media_file; ?>" alt="<?php echo $row->media_title; ?>"></div>
<?php endforeach; ?>
</div>
<div class="col s12 m8 owl-carousel owl-theme" id="type-2">
<div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide1.jpg" alt=""></div>
<div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide2.jpg" alt=""></div>
</div>
JavaScripts
function type_click() {
$("#type1").click(function() {
$("#type-1").fadeIn(300);
$("#type-2").fadeOut(300);
});
$("#type2").click(function() {
$("#type-2").fadeIn(300);
$("#type-1").fadeOut(300);
});
}
$(function() {type_click()});
當我僅使用2種內容時,此方法工作正常,但當我嘗試使用2種以上內容時,此方法無法正常工作。 將不勝感激。 提前致謝。
嘗試這個:
https://jsfiddle.net/y6xjuoba/
HTML
<div class="col s12 m4">
<h4 class="pict-menu"><a href="#!" id="type-1" class="waves-effect waves-default">type1</a></h4>
<h4 class="pict-menu"><a href="#!" id="type-2" class="waves-effect waves-default">type2</a></h4>
<h4 class="pict-menu"><a href="#!" id="type-3" class="waves-effect waves-default">type3</a></h4>
<h4 class="pict-menu"><a href="#!" id="type-4" class="waves-effect waves-default">type4</a></h4>
</div>
<div class="col s12 m8 owl-carousel owl-theme" id="type-2">
<div class="item type-1">test1</div>
<div class="item type-2">test2</div>
<div class="item type-3">test3</div>
<div class="item type-4">test4</div>
</div>
JS:
function type_click() {
$(".waves-effect").click(function() {
var clicked = $(this).hasClass("clicked")
if (clicked !== true) {
var currImage = '.' + $(this).attr("id"); + '"'
$(".waves-effect").removeClass("clicked");
$(this).addClass("clicked");
$(".item").fadeOut(300);
$(currImage).fadeIn(300);
}
});
}
$(function() {
type_click()
});
有點雜亂無章,但它可以處理任意數量的圖像。 只需確保輪播項目divs的類等於pict-menu鏈接的id。 如果您要傳送大量圖像,則可能需要考慮某種模板解決方案,例如Handlebars。
$(".owl-theme").click(function() { //select by class
var clicked = $(this);
clicked.fadeIn(300); //fade selected element in
$('.owl-theme').not(clicked).fadeOut(300); //fade everything except clicked element out
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.