自己写的一个jquery的效果，鼠标放上去显示一个div，隐藏一个div_百度知道
自己写的一个jquery的效果，鼠标放上去显示一个div，隐藏一个div
大致的效果就是一个li的列表
li里面本来是显示.show1的内容的，
然后鼠标放上去后,show1隐藏了，显示show2的内容
我做的效果有问题，就是鼠标放上去后它就显示隐藏执行了不止一次，
重复地显示隐藏，我希望大家帮我看看我的代码有什么问题
下面是html代码...
顺便再问下，这几天提问看到知道上面有些人可以直接把代码黏贴上来，就好像在编辑器里面一样请问这是怎么提交的
我有更好的答案
$(document).ready(function(){&&&&&&&&$(&#news_list&div.show1&).mouseover(function(){&&&&&&&&&&$(this).slideUp(500);&&&&&&&&&&$(this).next(&.show2&).slideDown(500);&&&&&&});&&&&&&&$(&#news_list&div.show2&).mouseout(function(){&&&&&&&&&&$(this).slideUp(500);&&&&&&&&&&$(this).prev(&.show1&).slideDown(500);&&&&&&});})你如果以li做为触发对象的话，肯定会执行多次的，因为show1和show2都在li里，还有语法高亮是要在回答的时候才有
采纳率：35%
来自团队：
$(function() {
$(&#weixin_weibo&).hover(function(){
$(&#big_weixin&).slideDown(500);
},function(){
$(&#big_weixin&).slideUp(500);
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
转载 & & 作者：企鹅
这篇文章主要介绍了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果,涉及jQuery鼠标事件的响应及链式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果。分享给大家供大家参考，具体如下：
这里演示jQuery实现鼠标移动到链接上，滑动展开/隐藏图片效果，鼠标放在“上一页”“下一页”上，立即浮现出所对应的图片，有点提前预览的味道，让用户知道下一页或下一页的大致内容，很好的提升了用户体验。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&鼠标移动链接上，滑动展开/隐藏图片效果&/title&
&script language="javascript" src="jquery1.3.2.js"&&/script&
&script type="text/javascript" language="javascript"&
$(function(){
$(".list&li:has(div)").hover(function(){
$(this).children('a').addClass('red').end().find('div').slideDown("fast");},
function(){
$(this).children('a').removeClass('red').end().find('div').slideUp("fast");
*{margin:0;padding:0}
body{background:#F8F3ED}
li{list-style:none}
.list{height:40background:#padding-left:100}
.list li{float:position:}
.list li a{float:width:100height:40line-height:40 text-align:color:#B7B7B7;text-decoration: font-family:"微软雅黑";}
.list li a:hover{background:#99C228;color:#FFF;}
.list .box{position:top:40left:0;display:width:240height:170background:#99C228;color:#FFF;}
.list .box img{width:220height:150margin:10}
.list li a:hover,.red{background:#99C228!color:#FFF!}
&ul class="list"&
&li&&a href="javascript:;"&上一页&/a&
&div class="box"&&img src="images/wall_s9.jpg" /&&/div&
&li&&a href="javascript:;"&下一页&/a&
&div class="box"&&img src="images/wall_s7.jpg" /&&/div&
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具posts - 286,&
comments - 132,&
trackbacks - 0
在线体验效果：&以下是完整源代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&jQuery实现鼠标经过图片变亮效果 - 何问起&/title&&base target="_blank" /&
&style type="text/css"&
a {color:white;}
body{background:#000;}
body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
.hovertreebox{width:<span style="background-color: #f5f5f5; color: #px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
.hovertreebox li{width:<span style="background-color: #f5f5f5; color: #px; height:<span style="background-color: #f5f5f5; color: #px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
&script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"&&/script&
&script type="text/javascript"&
$(function(){
$('.hovertreebox li').mouseover(function (e) {
$(this).siblings().stop().fadeTo(500,0.4);
$('.hover'+'treebox li').mouseout(function (e) {
$(this).siblings().stop().fadeTo(500,1);
&div style="color:white"&jQuery突出图片列表中鼠标经过项
&br /&&a href="http://hovertree.com"&首页&/a& &a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm"&原文&/a& &a href="http://hovertree.com/texiao/"&更多特效&/a&&/div&
&div class="hovertreebox" id="hovertreelist"&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/01.jpg" width="200" height="186" /&&/li&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/02.jpg" width="200" height="186" /&&/li&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/03.jpg" width="200" height="186" /&&/li&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/04.jpg" width="200" height="186" /&&/li&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/05.jpg" width="200" height="186" /&&/li&
&li&&img src="http://hovertree.com/texiao/jquery/1/images/06.jpg" width="200" height="186" /&&/li&
&div style="text-align:margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:"&
&p&适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.&/p&
&p&来源：&a href="http://hovertree.com/" target="_blank"&HoverTree&/a&&/p&
web前端资源：
阅读(...) 评论()jQuery在鼠标经过触发动画_百度知道
jQuery在鼠标经过触发动画
我有更好的答案
这种方法你的代码有问题， &myfirst 3s&后面应该没有分号 【;】，不过推荐你用css来实现&!DOCTYPE&html&&html&&head&&&meta&charset=&utf-8&&&&title&test&/title&&&style&*{&padding:0;margin:0;font-size:12&}.abs11{width:25height:25cursor:&background-color:#line-height:25margin:10px& -webkit-transition:&-webkit-transform&0.5s&ease--moz-transition:&-moz-transform&0.5s&ease--o-transition:&-o-transform&0.5s&ease--ms-transition:&-ms-transform&0.5s&ease-}.abs11:hover{ -webkit-transform:&rotate(180deg);-moz-transform:&rotate(180deg);-o-transform:&rotate(180deg);-ms-transform:&rotate(180deg);transform:&rotate(180deg);} &/style&&/head&&body&&div&class=&abs11&&&/div&&/body&&/html&
采纳率：79%
为您推荐：
其他类似问题
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。基于jQuery创建鼠标悬停效果的方法
转载 & & 作者：老枪
这篇文章主要介绍了基于jQuery创建鼠标悬停效果的方法,实例分析了jQuery实现鼠标特效的原理与详细步骤,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下：
1. 创建HTML：
&li&&a href="/tv"&&img src="images/tv_off.gif" class="mainnav"&&/a&&/li&
2. 选择.mainnav的class：
$(".mainnav").hover(
function () {
function () {
3. 建立变量imgPath，指定图片SRC：
$(".mainnav").hover(
function () {
// Grab the source
var imgPath = $(this).attr("src");
function () {
// Grab the source
var imgPath = $(this).attr("src");
4. 找到字符串off，用on替换：
$(".mainnav").hover(
function () {
// Grab the source
var imgPath = $(this).attr("src");
// Replace the path in the source
$(this).attr("src",imgPath.replace("off", "on"));
function () {
// Grab the source
var imgPath = $(this).attr("src");
// Replace the path in the source
$(this).attr("src",imgPath.replace("on", "off"));
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具