如何使用javascript切换某些jquery效果
how to toggle certain jquery effects with javascript
我希望能够使用javascript在jquery中切换某些效果,这段代码正确吗?最简单的解决方案是什么?
附言:不要说"use.thoggle()",目前有一个错误导致它最小化了段落
HTML
<!--This first line calls in jquery-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<p>Hello all</p>
CSS
p {
color: red;
background-color: lightblue;
border-radius: 5px;
height: 50px
}
JQUERY/JAVASCRIPT
var num = 0;
$(document).ready(function () {
$("p").click(
if (num == 0) {
var num == 1;
} else {
var num == 0;);
$("p").click(function () {
if (num == 1) {
$(this).animate({
color: "black",
backgroundColor: "white",
fontFamily: "arial",
fontSize: "20px",
fontFamily: "serif"
}, 500);
} else {
$(this).animate({
color: "red",
backgroundColor: "lightblue",
borderRadius: "5px",
height: "50px",
}, 500);
});
});
感谢大家抽出时间,我真的很感激。
最简单的方法可能是使用数据属性作为标志,并在对象中使用ternarys,如以下
$('p').on('click', function() {
var flag = $(this).data('flag');
$(this).animate({
color : flag ? "red" : "black",
backgroundColor : flag ? "#ADD8E6" : "white",
fontSize : flag ? "20px" : "10px",
borderRadius : flag ? "5px" : "0px"
});
$(this).data('flag', !flag);
});
FIDDLE
至于为什么你的代码不起作用,你只是在第一次点击处理程序中使用了错误的运算符,而没有定义函数,正确的代码应该是:
var num=0;
$(document).ready(function () {
$("p").click(function(){
if (num == 0) {
num = 1;
} else {
num = 0;
}
});
$("p").click(function () {
if (num == 1) {
$(this).animate({
color: "black",
backgroundColor: "white",
fontFamily: "arial",
fontSize: "20px",
fontFamily: "serif"
}, 500);
} else {
$(this).animate({
color: "red",
backgroundColor: "lightblue",
borderRadius: "5px",
height: "50px",
fontSize: "12px",
}, 500);
}
});
});
然而,我更喜欢@adeneo的解决方案,因为它更优雅,不那么冗长
相关文章:
- 为什么不在浏览器上获得JQuery效果呢
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 每次鼠标悬停触发一次 jquery 效果
- 对 jquery 效果应用自定义操作
- 鼠标点击时停止jquery效果's停止
- 在 scrollTop 上应用 Jquery 效果时遇到问题
- 为什么jQuery效果在我的手机上不起作用,但在我的桌面上工作
- 将自定义 JavaScript/jQuery 效果添加到 MVC 3 表单验证中
- jQuery 效果在 Wordpress 模板文件中不起作用
- 如何在用户可视化页面点时启动 jQuery 效果
- 需要在同一页面上使用多个相同的jQuery效果
- 无法将 jquery 效果函数应用于动态创建的元素
- 仅在单击时将 jQuery 效果添加到 HTML 元素父级
- 如何减慢这种 JQuery 效果
- 如何使用javascript切换某些jquery效果
- 用于加载的JQuery效果/动画
- 如果有多个元素被动画化,如何知道jquery效果何时结束
- jQuery效果:我哪里出错了
- 使用淡入淡出滚动jQuery效果的2列浮动画廊
- 加载后Jquery效果消失