Response title
This is preview!
- Screen name: vandel212
vandel212's Profile
5 Posts
6 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- Hi, I have a div that I am trying to animate when the mouse moves over it. The problem is while it is moving if i move the mouse over some text is gets real choppy. I've figured out that what is happening is when the mouse moves over the text it calls the mouse out function and then calls the the mouse over function and keeps doing that while the mouse is moving. I cannot seem to figure it out. If someone can take a look at my code and see what I'm doing wrong I'd appreciate it. I've been working on this for a while and can't seem to figure it out.Here is my code:
<
html xmlns="http://www.w3.org/1999/xhtml"><
head runat="server">
<title></title>
<style type="text/css">
p
{
margin:0px 0px 0px 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function () {
$(
"#TopNavDiv").mouseover(function () {
$(
this).stop().animate({ top: '0px' });
});
$(
"#TopNavDiv").mouseout(function () {
$(
this).stop().animate({ top: '-45px' });
});
});
</script>
</
head>
<
body style="margin:0px 0px 0px 0px">
<div id="TopNavDiv" style="margin:0px 0px 0px -495px; height:71px; width:990px; background-color:Green; position:fixed; top:-45px; left:50%;">
<p><br />test text<br /></p>
</div>
</
body>
</
html>
- Hi, i'm having some issues with my jquery application. I'm making an accordion navigation menu (I know there are plenty out there to use, but this is for learning purposes). When the user hovers over a div it expands and the others contract, and this works fine. However the issue I'm running into is that if I move the mouse over other elements within the div while the animation is running it stops for a split second and the continues, causing it to look choppy. Any idea what causes this?
Here is my jquery code:- $(document).ready(function() {
$("#divAccordianContainer").mouseout(function() {
$("#AccordianPanel1").stop().animate({ width: 198 }, 350);
$("#AccordianPanel2").stop().animate({ width: 198 }, 350);
$("#AccordianPanel3").stop().animate({ width: 198 }, 350);
$("#AccordianPanel4").stop().animate({ width: 198 }, 350);
$("#AccordianPanel5").stop().animate({ width: 198 }, 350);
});
$("#AccordianPanel1").mouseover(function() {
$("#AccordianPanel1").stop().animate({ width: 794 }, 500);
$("#AccordianPanel2").stop().animate({ width: 49 }, 500);
$("#AccordianPanel3").stop().animate({ width: 49 }, 500);
$("#AccordianPanel4").stop().animate({ width: 49 }, 500);
$("#AccordianPanel5").stop().animate({ width: 49 }, 500);
});
$("#AccordianPanel2").mouseover(function() {
$("#AccordianPanel1").stop().animate({ width: 49 }, 500);
$("#AccordianPanel2").stop().animate({ width: 794 }, 500);
$("#AccordianPanel3").stop().animate({ width: 49 }, 500);
$("#AccordianPanel4").stop().animate({ width: 49 }, 500);
$("#AccordianPanel5").stop().animate({ width: 49 }, 500);
});
$("#AccordianPanel3").mouseover(function() {
$("#AccordianPanel1").stop().animate({ width: 49 }, 500);
$("#AccordianPanel2").stop().animate({ width: 49 }, 500);
$("#AccordianPanel3").stop().animate({ width: 794 }, 500);
$("#AccordianPanel4").stop().animate({ width: 49 }, 500);
$("#AccordianPanel5").stop().animate({ width: 49 }, 500);
});
$("#AccordianPanel4").mouseover(function() {
$("#AccordianPanel1").stop().animate({ width: 49 }, 500);
$("#AccordianPanel2").stop().animate({ width: 49 }, 500);
$("#AccordianPanel3").stop().animate({ width: 49 }, 500);
$("#AccordianPanel4").stop().animate({ width: 794 }, 500);
$("#AccordianPanel5").stop().animate({ width: 49 }, 500);
});
$("#AccordianPanel5").mouseover(function() {
$("#AccordianPanel1").stop().animate({ width: 49 }, 500);
$("#AccordianPanel2").stop().animate({ width: 49 }, 500);
$("#AccordianPanel3").stop().animate({ width: 49 }, 500);
$("#AccordianPanel4").stop().animate({ width: 49 }, 500);
$("#AccordianPanel5").stop().animate({ width: 794 }, 500);
});
});
Thanks.- Hi, I'm having an issue with my website. I was on HTMLDrive.net looking for some cool effects for my site, and when I tried to put two of them in a page together it would not work properly. I can get only one to work at a time. It seems that they somehow interfere with each other, but I don't know how. Now have a little experience with JavaScript and jquery, but nothing I tried would work. Here is what I have in my page header right now:
<!--Accordion Nav script-->
<script type="text/javascript" src="js/accordian.pack.js"></script>
<!--Slide Show Script-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#desSlideshow2").desSlideshow({
autoplay: 'enable', //option:enable,disable
slideshow_width: '600', //slideshow window width
slideshow_height: '249', //slideshow window height
thumbnail_width: '120', //thumbnail width
time_Interval: '4000', //Milliseconds
directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory
});
});
</script>
The first one is an accordion navigation panel and it comes with a JavaScript file to link to in the header. Other than that there is no more JavaScript involved with it. Here is the link to it:
Accordion Navigation
The other one is a image slide show that uses jquery. it has the jquery script, a script file of it own, and some JavaScript right in the page header. Here is the link to this one:
Slide Show
Thanks in advance for the help.- Hi, I'm having an issue with my website. I was on HTMLDrive.net looking for some cool effects for my site, and when I tried to put two of them in a page together it would not work properly. I can get only one to work at a time. It seems that they somehow interfere with each other, but I don't know how. Now have a little experience with JavaScript and jquery, but nothing I tried would work. Here is what I have in my page header right now:
<!--Accordion Nav script-->
<script type="text/javascript" src="js/accordian.pack.js"></script>
<!--Slide Show Script-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#desSlideshow2").desSlideshow({
autoplay: 'enable', //option:enable,disable
slideshow_width: '600', //slideshow window width
slideshow_height: '249', //slideshow window height
thumbnail_width: '120', //thumbnail width
time_Interval: '4000', //Milliseconds
directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory
});
});
</script>
The first one is an accordion navigation panel and it comes with a JavaScript file to link to in the header. Other than that there is no more JavaScript involved with it. Here is the link to it:
Accordion Navigation
The other one is a image slide show that uses jquery. it has the jquery script, a script file of it own, and some JavaScript right in the page header. Here is the link to this one:
Slide Show
Thanks in advance for the help.- Hi, I'm having this problem with the animate function. I have a bunch of divs and I have each of them animated by expanding 300px in height when the user clicks the image associated with it. The top 2 work just fine, but because I have to scroll down to the third one as soon as I click the image to have it animate it jumps right to the top of the page. Obviously I do not want it to do that. How do I make the page stay still where the user is at.
- «Prev
- Next »
- $(document).ready(function() {
Moderate user : vandel212
© 2012 jQuery Foundation
Sponsored by 
and others.
