晚上,
我遇到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个以上的内容时,它无法正常工作。非常感谢任何帮助。提前谢谢。
答案 0 :(得分:3)
试试这个:
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()
});
它有点混乱,但它适用于任意数量的图像。只需确保轮播项div的类等同于pict-menu链接的id。如果您有大量的图像到旋转木马,您可能需要考虑某种模板解决方案,如Handlebars.
答案 1 :(得分:0)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.example.ali.test1.MainActivity">
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_weight="1" />
</RelativeLayout>