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;
}
Related
Is there a simple cross-browser css3 solution to altering the mouse cursor to a clear right/ left graphic according to the mouse position within a div? Or is this a JQuery plugin job?
As in the mouse reaction in the carousel area in this http://themeforest.net/item/flamingo-agency-freelance-portfolio-theme/full_screen_preview/6077145
You can use the :hover selector with the cursor property to do this. Make two fixed, transparent elements for each half of the page to use with :hover, and specify a custom cursor image by assigning cursor a URL. No JS required...
With JS programatically make a div follow the hidden cursor.
See example:
<div class="main_area">
...
...
...
</div>
<!--
// The html:
-->
<div id="custom_cursor">HELLO</div>
<!--
// The script uses jQuery
-->
<script type="text/javascript">
$(document).ready(function(){
var $area = $('.main_area').css({
'cursor':'none'
}),
$myCursor = $('.custom_cursor').css({
'position': 'fixed',
'z-index': '999'
})
if ($myCursor.lenght){
$area
.on('mouseout.customCursor', function(){
$myCursor.hide()
})
.on('mousemove.customCursor', function(event){
$myCursor.show().css({
'left': event.clientX - 20,
'top': event.clientY + 7
})
})
}
});
</script>
I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!
jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)
I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?
You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});
You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/
So I have a section where I'd like to click on the image and have .speaker-info animate open by toggling class .open on .speaker-container to animate the height to reveal .speaker-info while toggling the class .hover for a hover state image. A .fade class also gets toggled on to .speaker-info to change the opacity. I got everything working fine if I click one image and close it with the same location, but when I open one and click another image everything closes, so I'll need two clicks to open the other, and the hover image states on for the previous image.
So I'd like to open one div and then if another image clicked, all close and the recent one opens.. I've been going around in circles trying to figure the best way to do this.. but I keep hitting a wall.
I'm basically triggering everything by toggling css classes to create the opening/closing and hovering.
Here's my code.
Also, I'm looking for opinions on how to make my code more nimble, and more efficient, sometimes I feel like I write waaay to much where I could do the same with a few lines less.
Thanks!
<section id="speakers">
<div class="container">
<div class="row">
<div class='speaker-container'>
<div class="span3 offset1" id="{row_index}">
<div class="speaker-img">
<img src="{speaker_image}" alt="{speaker_name}" class="hover">
<img src="{speaker_hover}" alt="{speaker_name}">
</div>
<h4>{speaker_name}</h4>
</div>
<div class="speaker-info">
<button class="close-speaker">Close</button>
<h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
<p>{speaker_bio}</p>
</div>
</div>
</div>
</div>
</section> {!-- /End Speakers --}
Javascript codes
$('.speaker-container').each(function(){
var containerHeight = $(this).height();
$('.speaker-info').css({ 'top' : containerHeight});
});
$('#speakers .span3').on('click', function(){
var containerHeight = $(this).parent('.speaker-container').height();
var h = $(this).next('.speaker-info').height();
var totalHeight = containerHeight + h;
$(this).find('.speaker-img').children().toggleClass('hover');
$('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade');
if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) {
$(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open');
$(this).next('.speaker-info').addClass('fade');
} else {
$('.speaker-container').css({'height' : h}).removeClass('open');
$(this).next('.speaker-info').toggleClass('fade');
$('.speaker-info').removeClass('fade');
}
});
$('.close-speaker').on('click', function() {
var container = $(this).closest('.speaker-info').height();
$(this).closest('.speaker-container').css({'height' : container}).removeClass('open');
$('.speaker-info').removeClass('fade');
});
I suggest you can use JQuery for that feature you want to do. Here's the link for your reference: JQuery Accordion. I hope it helps. Thanks!
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>
...
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
});