我实际上在更改 CSS 类后遇到了一些函数问题。
这是我的代码。
<html>
<head>
<title>jQuery Animate Test</title>
<style>
.animatebox { width: 300px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250; padding-left: 10px;}
.hiddenstuff { opacity: 0; }
.boxtitle { font-size: 18px; font-weight: 100;}
.clear { clear: both;}
.arrow_up { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
.arrow_down { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
p {margin: 15px 0 0 0;}
</style>
<script src="jquery-1.8.2.js"></script>
</head>
<body>
<h1>Animate Test</h1>
<div id="content">
<div class="animatebox">
<img class="arrow_up" height="35px" src="arrow_up.png"><p class="boxtitle">Lala Box</p>
<div class="clear"></div>
<p class="hiddenstuff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata </p>
</div>
</div>
<script>
$(function() {
$('.arrow_up').click(function(){
$('.arrow_up').attr('src',"arrow_down.png");
});
$('.arrow_up').click(function () {
$('.arrow_up').addClass('arrow_down');
});
$('.arrow_up').click(function () {
$('.arrow_up').removeClass('arrow_up');
});
});
$(".arrow_up").click(function () {
$('.animatebox').animate ({
height: '250px'
}, 200 );
});
$(".arrow_up").click(function () {
$('.hiddenstuff').animate ({
opacity: '1'
}, 200 );
});
$(".arrow_up").click(function () {
$('.boxtitle').animate ({
fontSize: '28px',
fontWeight: '700'
}, 200 );
});
$(".arrow_down").click(function () {
$('.animatebox').animate ({
height: '50px'
}, 200 );
});
$(".arrow_down").click(function () {
$('.hiddenstuff').animate ({
opacity: '0'
}, 200 );
});
$(".arrow_down").click(function () {
$('.boxtitle').animate ({
fontSize: '18px',
fontWeight: '100'
}, 200 );
});
</script>
</body>
</html>
单击向上按钮后，它会将类更改为“arrow_down”，但向下动画的功能将无法正常工作？!？ :/
更新
$("body").on("click", ".arrow_up", function () {
$('.arrow_up').attr('src',"arrow_down.png");
$('.arrow_up').addClass('arrow_down');
$('.arrow_up').removeClass('arrow_up');
$('.animatebox').animate ({
height: '250px'
}, 200 );
$('.hiddenstuff').animate ({
opacity: '1'
}, 200 );
$('.boxtitle').animate ({
fontSize: '28px',
fontWeight: '700'
}, 200 );
});
$("body").on("click", ".arrow_down", function () {
$('.arrow_down').attr('src',"arrow_up.png");
$('.arrow_down').addClass('arrow_up');
$('.arrow_down').removeClass('arrow_down');
$('.animatebox').animate ({
height: '50px'
}, 200 );
$('.hiddenstuff').animate ({
opacity: '0'
}, 200 );
$('.boxtitle').animate ({
fontSize: '18px',
fontWeight: '100'
}, 200 );
});
最佳答案
因为它是动态的，所以使用on。另外，您可以缩短一些代码:
$("body").on("click", ".arrow_up", function () {
$('.arrow_up').attr('src',"arrow_down.png");
$('.arrow_up').addClass('arrow_down');
$('.arrow_up').removeClass('arrow_up');
$('.animatebox').animate ({
height: '250px'
}, 200 );
$('.hiddenstuff').animate ({
opacity: '1'
}, 200 );
$('.boxtitle').animate ({
fontSize: '28px',
fontWeight: '700'
}, 200 );
});
$("body").on("click", ".arrow_down", function () {
$('.animatebox').animate ({
height: '50px'
}, 200 );
$('.hiddenstuff').animate ({
opacity: '0'
}, 200 );
$('.boxtitle').animate ({
fontSize: '18px',
fontWeight: '100'
}, 200 );
});
您不需要为您要做的每一件事都使用事件处理程序。这会很好(而且性能可能会好一点)
这是一个有效的 jsFiddle
关于CSS 类更改后 jQuery 函数将无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12615433/