Problem in slideDown() and slideUp() effect in jQuery
I want a slidedown and slideup effect on a particular div when you hove on corresponding <li>
tag. You can check it live at this link http://mashup2.sunnydsouza.com/index3.php
Am using the following jQuery to solve it
$(".altbgcolor").mouseenter(function() {
$(this).css("background- color","#D3EAC7").find(".newsthumb").corner();
$(".newstext h1",this).css("color","#000");
$(".newstext div",this).css("color","#000");
$(".sharedp").slideDown(slow);
}).mouseleave(function () {
$(this).css("background-color","#f5f5f5").find(".newsthumb").corner();
$("开发者_运维问答.altbgcolor:even").css("background-color","#f0f0f0");
$(".newstext h1",this).css("color","#666666");
$(".newstext div",this).css("color","#666666");
$(".sharedp").slideUp(slow);
});
Am I doing something wrong. Can someone just check the site html and see where am going wrong. I am in this big dilemna here :(
Try this:
$(".sharedp").slideUp("slow");.
slow should be a string
put the slow in quotes..
$(".sharedp").slideDown('slow');
and
$(".sharedp").slideUp('slow');
Update
To limit the slideUp/Down to the next .sharedp
element use
$(".altbgcolor").mouseenter(function() {
$(this).css("background-color","#D3EAC7").find(".newsthumb");
$(".newstext h1",this).css("color","#000");
$(".newstext div",this).css("color","#000");
$(this).next(".sharedp").slideDown('slow');
}).mouseleave(function () {
$(this).css("background-color","#f5f5f5").find(".newsthumb");
$(".altbgcolor:even").css("background-color","#f0f0f0");
$(".newstext h1",this).css("color","#666666");
$(".newstext div",this).css("color","#666666");
$(this).next(".sharedp").slideUp('slow');
});
You will notice that i have removed the .corner
method which seemed to be causing a silent failure of the script...
Also it would be better in terms of speed and maintenance if you created classes that describe the styling you want, and just used jquery to add/remove these classes..
Some of the Errors found
title="Traffic Exchange""
should have a single ending"
- ID's of elements that are numeric. Only HTML5 allows for numeric IDs, otherwise look at the specs http://www.w3.org/TR/html4/types.html#h-6.2
- duplicate IDs. IDs should be unique in the document.
<div class="newsthumb" center center no-repeat;">
thecenter center no-repeat;"
should not be there- You have
div
elements under aul
which is invalid. Onlyli
and otherul
elements can go under aul
, there rest should be inside theli
.
and more.. in general you should strive for valid html. Validators can help you, such as http://validator.w3.org/check?uri=http%3A%2F%2Fmashup2.sunnydsouza.com%2Findex3.php&charset=%28detect+automatically%29&doctype=Inline&group=1&verbose=1&user-agent=W3C_Validator%2F1.2
If that is a direct copy of the code, you need to put "slow" in quotes in the slideUp/down functions.
精彩评论