fadeout in jQuery
I am trying to add a Jquery function for updating a div on hover of a link inside a span my html structure is
<ul><li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/aruna">Aruna </a>
</span>
<div style="display: none;" class="image_hover">
Student
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
<li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/jasmine">jasmine </a>
</span>
<div style="display: none;" class="image_hover">
Professor
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
</ul>
The jQuery i have written is
I wrote like
jQuery(document).ready(function(){
var _selectedLinkEl = null;
var _detailEl = null;
var body = jQuery("body");
var elem=null;
jQuery(".user-link").mouseover(function(event) {
_selectedLinkEl = this;
_detailEl=jQuery(event.target).parent().next();
//_detailEl.show();
_detailEl.fadeIn("slow");
elem=jQuery(this).parent().next();
_href=jQuery(this).attr('href').split("/")[2];
jQuery.post('/users/user_detail/?name='+_href,
function(data){
//elem.html(data).show();
elem.html(data).fadeIn("slow");
});//post
body.mouseover(_bodyMouseOverFunction);
}); // user-link
var _bodyMouseOverFunction = function(event) {
if(event.target != _selectedLinkEl &&
event.target != _detailEl &&
jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {
//_detailEl.hide();
_detailEl.fadeOut("slow");
body.unbind("mouseover", _bodyMouseOverFunction);
}
};// mouseover
});
The above jquery updates the image-hover div and its displaying the div by fadeIn but its getting fadeout at all times .
I am trying to fade out the DIV image_hover only if my mouse hover is out of the div(image_hover) or any body elements..
In the cases , if my mouse is on the link or on the div or on any of the elements inside the div (image_hover) , the Div should not fadeout..
Please give suggestions for this/.
How to do so ??
Your HTML is part of the issue. To pull this off the area that needs to remain open has to live within your triggers tag, but I noticed other things as well:
As such, I altered your HTML and created the potential solution below. This will execute the desired behavior of opening the "details" area (and will remain open while hovering).
Additionally, you don't really need to hide the "details" area...but I left that in for you anyway.
In The Meantime, Consider The Following Potential Solution:
<html>
<head runat="server">
<title></title>
<script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>
<style type="text/css">
.vCard
{
font-family: Arial;
}
.vCard a
{
text-decoration: none;
}
.vCard a.owner
{
color: Green;
}
.vCard span.timeline
{
color:Navy;
}
.vCard span.timeline div.type
{
display: none;
}
.vCard span.timeline div.type div.details
{
display: none;
margin-left: 20px;
}
</style>
<script type="text/javascript">
function hoverIn() {
var card = jQuery(this).parent();
var cardType = jQuery('div.type', card);
cardType.fadeIn('fast', function() {
var cardTypeDetails = jQuery('div.details', this);
cardTypeDetails.fadeIn('Fast');
});
}
function hoverOut() {
var card = jQuery(this).parent();
var cardType = jQuery('div.type', card);
cardType.fadeOut('fast', function() {
var cardTypeDetails = jQuery('div.details', this);
cardTypeDetails.fadeOut('Fast');
});
}
jQuery(document).ready(function() {
var context = jQuery('#myList');
// This will target the SPECIFIC timeline object(s).
jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="myList">
<li>
<div class="vCard">
by
<a class="owner" href="/users/aruna">Aruna </a>
<span class="timeline">
about 1 hours ago
<div class="type">
<a href="#">Student</a>
<div class="details">
<div>
Employee ID:<label></label>
</div>
<div>
Project Name:<label></label>
</div>
<div>
Project Role:<label></label>
</div>
<div>
Supervisor Name:<label></label>
</div>
</div>
</div>
</span>
</div>
</li>
<li>
<div class="vCard">
by
<a class="owner" href="/users/jasmine">Jasmine </a>
<span class="timeline">
about 2 days ago
<div class="type">
<a href="#">Professor</a>
<div class="details">
<div>
Employee ID:<label></label>
</div>
<div>
Project Name:<label></label>
</div>
<div>
Project Role:<label></label>
</div>
<div>
Supervisor Name:<label></label>
</div>
</div>
</div>
</span>
</div>
</li>
</ul>
</form>
</body>
</html>
上一篇: 用jquery复制bing图片主页效果（淡入，淡出）
下一篇: 在jQuery中淡出