Div is jumpy with fadeIn jQuery - javascript

When I roll over .comptext_rollover div it should hide the initial div on the page and show the minipage div. but it does but is sometimes really jumpy and also the minipage div sometimes shows below the initialpage div. any ideas? sorry i am new to coding! Thanks in advance.
$(document).ready(function() {
$('#mini_page').hide();
$('.comptext_rollover').hover(function() {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}, function() {
$('#mini_page').hide();
$('#initial_page').show();
$('.register_button').show();
$('#container').css({
'margin-top': '-150px'
});
});
});

I prepared a fiddle demo HERE
re-EDIT:
JSFIDDLE DEMO
(the demo may be incorrect while the main CSS is an external link)
I used:
<div id="container">
<div id="initial_page" class="page">
<div id="playvideo_hoverbutton"></div>
<div class="register_button"></div>
<div id="invisible_register2"></div>
<div id="termsandconditionsapplyshort"></div>
</div>
<div id="mini_page" class="page">
<div id="minicar_animated"></div>
<div id="worth25k"></div>
<div class="register_button"></div>
<div id="invisible_register"></div>
</div>
<!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
<div class="comptext_rollover">
<!--<div id="competition_text"></div>-->
</div>
</div>
$('#mini_page').hide();
$('.comptext_rollover').mouseenter(function() {
$('.page').fadeToggle(400);
});
$('.comptext_rollover').mouseleave(function() {
$('.page').fadeToggle(400);
});
In any case what you should do:
Position absolute the 2 screens you need to 'swap' into a container.
Than what you do:
Position the 'rollover' element outside the 'screens'.
Adjust the marginTop of the bigger image(car image) in the CSS (like I did) to fix the buggy 'jumps'.
IF POSSIBLE: ONLY ONE rollover ACTION ELEMENT!
Fix the margin-top of the car image. (give it a -Npx)
Doing so you don't need to do that stuff with positioning your container -Npx
There is also a simpler way to do the same effect:
you add to BOTH screens a class .swappable, making the second one (CSS)display:none; , and than you just use jQuery toggling just this class.

you've not set a great deal of time for the fade in. you're also just hiding some of the divs which makes the fade in move around depending on where you put them. maybe use slides instead. I have saved an example here: http://jsfiddle.net/kBEUH/
$(document).ready(function(){
$('#mini_page').hide();
$('.comptext_rollover').hover(function () {
$('#initial_page').fadeOut(1000);
$('.register_button').fadeOut(1000);
$('#mini_page').slideDown(1000);
}, function(){
$('#mini_page').slideUp(1000);
$('#initial_page').fadeIn(1000);
$('.register_button').fadeIn(1000);
});
});

if you put a console.log in your hover() function, you'll see hover is firing like crazy. This causes the animation to start over and over again, while moving your mouse.
You could take advantage of the jquery :animated selector:
$('.comptext_rollover').hover(function() {
//enable this line to see the hover event is firing every time your mouse moves
//console.log("hovering")
//if the div is in the middle of an animation, do nothing
if (!$("#mini_page").is(":animated")) {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}
}, function() {
//etc
});
EDIT:
Now I think of it, your probably want to use .mouseenter() and .mouseleave() instead of hover()
$('.comptext_rollover').mouseenter(function() {
//your code
}).mouseleave(function() {
//your code
});

Related

How to add right to left animation using javascript?

I am new in javascript. I am trying to add animation in my code. Something like, when I mouse hover on a section the ABC should appear and move from right to left and when I remove the mouse from the section it should disappear.
I have implemented the appear disappear part but how to add the animation? Please share with me if anyone has any idea.
My codes are below:
<head>
<script src="/assets/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload=hide_fostering;
function show_fostering()
{
document.getElementById('fostering').style.visibility="visible";
}
function hide_fostering()
{
document.getElementById('fostering').style.visibility="hidden";
}
</script>
</head>
<html>
<body>
<section onMouseOver="show_fostering()" onMouseOut="hide_fostering()">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1><strong>CONNECTING</strong></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row pad-top4" id="fostering">
<h3>ABC</h3>
</div>
</div>
</div>
</section>
</body>
</html>
Use a JavaScript animation library such as TweenJs, alternatively use the jquery animate() method.
$('#selector').on('click', function(){
$('div').animate({
height : 500px;
});
});
This will animate all divs when #selector will be clicked.
See http://www.w3schools.com/jquery/eff_animate.asp for a tutorial on jqueryanimate() method.
To do this on mouse hover, use this :
$('div').on('mouseover', function(){
$(this).animate({
height : 500px;
});
});
This will animate the div which is being hovered on by mouse.
Jquery animate() method is used to animate any CSS animation. So you can animate any CSS property. If you want to animate other properties of CSS, then just replace height : 500px with those CSS rules.
For your purpose, use this :
(I have written for visibility part as well, because the code written by you will not work properly. It will check whether your mouse pointer is on top of #fostering, immediately when the page loads. So delete that part.)
$('#fostering').on('mouseover', function(){
$(this).animate({
visibility : "visible",
left : "500px"
});
});
$('#fostering').on('mouseout', function(){
$(this).animate({
visibility : "hidden",
left : "-=500px"
});
});
You will have to change the value of position property of CSS in order to animate left property in the above code, otherwise it won't work. To do this, use the following CSS :
#fostering {
position : relative;
}

Show overlay on hover over single div in set of divs with same class

Let's say I have 4 dynamically generated div's, each with the same class, and unique number ids, like so. Each contains an absolutely positioned div with 100% width and height so when displayed, it fills the entire div.
<div class="my_class" id="1">
<div class="overlay"></div>
</div>
<div class="my_class" id="2">
<div class="overlay"></div>
</div>
<div class="my_class" id="3">
<div class="overlay"></div>
</div>
<div class="my_class" id="4">
<div class="overlay"></div>
</div>
<style>
.overlay {
display:none;
}
</style>
When I hover over one of these divs, I want that div, and none of the others to display the overlay, then when I stop hovering, the overlay div should disappear. Any ideas as to how to do this using jquery? This is what I've tried.
$('document').ready(function(){
$('.my_class').mouseenter(function(){
var id = $(this).attr("id");
$("#"+ id +" div").fadeTo("fast", 1);
$("#"+ id +" div").mouseleave(function(){
$("#"+ id +" div").fadeTo("fast", 0);
});
});
});
Id rewrite it to something like:
$('document').ready(function(){
$('.my_class').mouseenter(function(){$(this).fadeTo("fast", 1);});
$('.my_class').mouseleave(function(){$(this).fadeTo("fast", 0);});
});
You are attaching the mouseleave inside the mouseenter and I guess you didn't wont that.
Inside the mouseenter callback just use $(this).find to find only the div within it.
Adding the mouseleave callback within the mouseenter callback is a bad idea. that will add a new callback every time the mouse enters the parent div.
Is this what you're trying to do?
http://jsfiddle.net/2R3Yt/
$('document').ready(function () {
$('.my_class').mouseenter(function () {
var id = $(this).attr("id");
$(this).find("div").fadeTo("fast", 1);
});
$('.my_class').mouseleave(function () {
$(this).find("div").fadeTo("fast", 0);
});
});
I think this solution may be a bit tidier. Also have a fiddle.
$('.my_class').mouseenter(function() {
$(this).children('.overlay').fadeTo(1000, 0);
})
$('.my_class').mouseleave(function() {
$(this).children('.overlay').fadeTo(1000, 1);
})
The original code was working for me, however; the events continuously fade the overlays in and out if you move your cursor erratically between divs.
To fix that, I replaced the original mouseenter and mouseleave events with one which is similar to on but only catches on the event once.
$('.my_class').one('mouseenter', function() {...});
$('.my_class').one('mouseleave', function() {...});
I then put the mouseenter event inside the mouseleave so we can continue doing the hover effect on the after we leave the active div.
http://jsfiddle.net/q8qFy/4/
If you're interested CSS only solution:
http://jsfiddle.net/EsVLC/1/

How to slide child dive left to disappear and replace with a new child?

I have 2 <div>s inside a parent container like;
<div class="container">
<div class="content" style="background-color: #CC0033;">static content</div>
<div class="content" style="background-color: #FF6600;">dynamic content</div>
</div>
The first child div (static content) contain some text. When I click a trigger link, it will slide left and disapperar. I have gone it using jquery animate() like;
$("#trigger").click(function(){
$(".content").animate({ "margin-left": "-100px" }, "slow");
});
When this slide out, it should be followed by another div, which has the same class, so that it looks same. The old slide thus will be vanished away and the parent container will have the new div. This event may continue whenever I click the trigger. Or for another example, on every 5 seconds, the current div will be slide left, followed with new div. The divs may contain a unique text, say, like a number. The number increments each time.
I think a new containing all info except text (content), which varies may be appended each time, but I am not sure will this solve my problem. Is this possible?
Here is the fiddle.
Try
jQuery(function($){
var $ct = $('.container')
$("#trigger").click(function(){
$ct.children(".content:first").animate({ "margin-left": "-100px" }, "slow", function(){
$(this).remove()
});
});
})
Demo: Fiddle
A solution to this might be that when #trigger is clicked, the click function not only just modify the style of the static content, but also move the dynamic content to the left by changing the margin-left.
It might looks like:
$('#trigger').click(function(){
$(/*static content*/).animate({"margin-left": "-100px"}, "slow");
$(/*dynamic content*/).animate({"margin-left": "0px"}, "slow");
});

Fading a <div> With 'onmouseover' and 'onmouseout' Happens Several Times

I have a <div> on my web page that I would like to have an opacity of 1 while you're hovering over it, but when the mouse is not hovering over it I would like it to fade to an opacity of 0.3. My problem is that currently when I hover over the <div> it starts fading in and out several times (rather than just once). I'm not sure if this is why, but I suspect it's because it detects the mouse rolling over the multiple <div>s that are within the one that I set to fade out.
Here is a very simplified segment of my web page to illustrate what I have so far:
<div id="div1">
<div id="div2" onmouseover="fadeElementTo('div1', 500, 1)" onmouseout="fadeElementTo('div1', 500, 0.3)">
<div id="div3">
<div id="div4">
</div>
</div>
<button id="myButton" onclick="doACoolAnimation()" ></button>
</div>
</div>
My fadeElementTo() function is pretty simple:
function fadeElementTo(eid, speed, opacity, callback) {
$("#" + eid).fadeTo(speed, opacity, callback);
}
In case it's relevant, I also have a button that animates the same div by simply moving it left or right when the button is clicked.
function doACoolAnimation() {
var hiddenState = GLOBAL_VAR.hiddenState;
// If the <div> is already hidden, make it visible
if (hiddenState == null || hiddenState == 1) {
GLOBAL_VAR.hiddenState = 0;
$("#div1").animate({
left: "0px"
}, 1500);
}
// Otherwise, hide it
else {
GLOBAL_VAR.hiddenState = 1;
$("#div1").animate({
left: "-800px"
}, 1500);
}
}
Any ideas what might be causing my bug? And better yet, what can I do to fix it?
Try onmouseenter instead of onmouseover and use jQuery to attach/bind those events rather than the attributes so it works the same across all browsers.
$('#outer').mouseenter(function() {
$('#log').append('<div>Handler for .mouseenter() called.</div>');
});
see here
Use mouseenter event to stop event bubbling, and stop method to make sure you clear unfinished animations on that element.
$('#div2').mouseenter(function(){
$('#div1').stop().fadeTo(500,1);
});
It detects the events multiple times. For example, if you want to change the size, going on and off fast changes the size even when the mouse is not on the div. The code needs to exit the program when the mouse is not on the div. To do that, you might include the code in something that kills the code when the mouse is not on top of the div so that the queued fades/animations do not run.
Edit:
Try looking at the JQuery documentation to see if there is anything that you can use.
You might able to use these:

Drop down interface from top of page using javascript

Quite simply, I want to know how I can do this 'http://www.lido-troon.co.uk/'.
Where it says 'Reserve a table'. This trigger allows a drop down interface to animate as if from above.
I'm not interested in the booking system in there, just the functionality.
I thought it could be done using anchors and smooth scroll, but that would mean the booking form was always there.
I will give you a code that will center this div on the top of the screen on every screen and will slide the div down from the top onLoad:
HTML:
<div id="ID_NAME">Your Content</div>
JQuery:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top","-100px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");return this;
}
$(document).ready(function(){
$('#ID_NAME').center().delay(300).animate({'top' : '0px'});
});
Hope this helped
Create the content and then show it using JQuery:
http://api.jquery.com/show/
You can have the top div with your booking system content hidden with jQuery's hide() than on .click() of the button (a tag), have it slideDown()
Example:
$(document).ready(function() {
$('booking_div').hide();
$('booking_a').click(function() {
$('booking_div').slideDown();
});
});
You can use javascript, Jquery. that have many UI effect. It's good and easy to use. You can learning it from document. e.g. http://www.webdesignersblog.net/coding/20-advanced-jquery-effects/ http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Yes you can,
create div at the top of your page with the style="display: none;" or set class with the css from style attribute. Then attach event click to your link and animate change.
JavaScript
$('#your_link_button').click(function()
{
$("#container").slideToggle('slow');
});
CSS
.hidden { display: none; }
HTML
<body>
<div id="container" class="hidden">your content</div>
...

Categories