jquery toggle animations / in reverse order - javascript

I want something like this:
One button triggers the script and then when it's done, the same button would do the script in reverse (toggle)
(Im learning javascript / jquery right now, so im a complete beginner)
Example:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate(
{height: '250px'},
function(){ $("#hidden_txt").fadeIn(1000); } );
});
});
</script>
<button>Start</button>
<div style="background:#98bf21; height:100px; width:100px; position:absolute;">
<span id="hidden_txt" style="display: none">Hey, just checking !</span>
</div>
I found the solution with css class toggle, but:
When it's closing, the css classes need to be turned off in reverse order, so first fade out and then div going back to 100px height
In IE9 and IE8 css transitions doesn't work :/
( jquery 1.12.4 )

Use the following JS:
<script>
var clicked=0;
$(document).ready(function(){
$("button").click(function(){
if(clicked==0){
$("div").animate(
{height: '250px'},
function(){ $("#hidden_txt").fadeIn(1000, function(){
clicked=1;
}); } );
}else if(clicked==1){
$("#hidden_txt").fadeOut(1000, function(){
$("div").animate(
{height: '100px'},
function()
{
clicked=0;
});
});
}
});
});
</script>

Related

jQuery switvching DIVS with fade effect

I have a very simple script to switch out divs. I would like to add in a fading transition to the script so that it is a bit smoother. However I cannot see what I am doing wrong (totally JS incompetent)
Thanks for any advice.
jQuery(document).ready(function( $ ) {
$('#div2, #div3').hide();
$('.show').click(function () {
$('.targetDiv').hide().fadeOut(1000);
$('#div' + $(this).attr('target')).show();
});
});
Your problem lies in this line: $('.targetDiv').hide().fadeOut(1000);
What is does - it sets style display: none; to all your elements you plan to cross-fade.
Also use the right attributes: data-target="#div1" instead of target="#div1" (which is not used for that purpose)
Instead:
jQuery(function($) { // DOM ready
// get all your targetDiv elements
var $fadeDivs = $(".targetDiv");
// Hide all but this one
$fadeDivs.not("#div1").hide();
$('.show').click(function(evt) {
// prevent the browser doing default stuff
evt.preventDefault();
// get the target element - using data-target attribute!
var selector = $(this).data('target');
var $target = $( selector );
// crossfade (don't forget to use .stop())
$fadeDivs.not($target).stop().fadeOut(1000);
$target.stop().fadeIn(1000);
});
});
.targets{ position:relative; height:100px; }
.targetDiv { position:absolute; height:100px; top:0; left:0;}
<div class="targets">
<div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div>
<div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div>
<div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div>
</div>
<a data-target="#div1" class="show">SHOW1</a>
<a data-target="#div2" class="show">SHOW2</a>
<a data-target="#div3" class="show">SHOW3</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

jQuery text() not working correctly when used after animate()

i i'm trying to do an animated progress bar, and i have this code so far:
HTML
<div class="bar-container">
<div class="bar"><div class="bar-value"></div></div><button>Submit</button><img src="gif.gif" class="loader">
<br><br>
<span class="progress"></span>
</div>
JQUERY
$(document).ready(function(){
$('button').click(function(){
$('.loader').fadeIn(1200);
$('.bar-value').animate({width: '+=1%'},100);
$('.progress').text("1%");
$('.bar-value').animate({width: '+=1%'},100);
$('.progress').text("2%");
$('.bar-value').animate({width: '+=1%'},100);
$('.progress').text("3%");
});
});
The problem is that text() only change when all animations have finished so, you can't see (1%), (2%), (3%), etc, you just see (3%) when the three animations finish.
Thanks in advance
Actually it changes the text before the animation starts, if you want something to happen after an animation use the animation callback.
$(document).ready(function(){
$('button').click(function(){
$('.loader').fadeIn(1200);
$('.bar-value').animate({width: '+=1%'},100, function(){
$('.progress').text("1%");
});
$('.bar-value').animate({width: '+=1%'},100, function(){
$('.progress').text("2%");
});
$('.bar-value').animate({width: '+=1%'},100, function(){
$('.progress').text("3%");
});
});
});
http://jsfiddle.net/sVDb7/

Div fading in and out

I need your help, I am working on a website where I want a div to delay for 2 seconds then fade in when another div is clicked, but when I want to click it again (to close it) I want it to fade out instantly. Any help?
If you can use Jquery, the following code will help you do it as i got what you want:
this is default css:
.invisElem{display:none}
and the jquery code:
$('body').on('click', '.boxbutton1', function(){
var counter = $(this).data('count');
if(counter == undefined){
counter = 0;
setTimeout(function() {
$('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
}, 2000);
}
else if(counter == 0){
$('.gymtext').fadeOut(function(){
$('.gymtext').remove()
});//fadeout quickly then remove
}
})
i tried to write it down novice friendly if you needed help add comment
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").fadeToggle(240);
});
});
</script>
<button>Click to fade DIV</button>
<div id="div" style="width:100px;height:100px;background-color:blue;"></div>
Html:
<div>Show div1 and hide div2</div>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
Css:
#div2 {display:none;}
Jquery:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow');
});
});

Simple jQuery animation not working

can anyone help me fix this, what am I missing?
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({
height: '0px'
});
});
</script>
The onClick doesn't even execute!
The div I want the onClick event to work on is here:
<div id="loginButton">Login ยป</div>
The div I want the animation to affect is here:
div id="toplogin"> <!-- more stuff --> </div>
Remove the semicolon after height: '0px' to make your JavaScript valid.
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({ height:'0px' });
});
</script>
However, unless you have overflow:hidden set for #toplogin the element will still be visible, even though it's height is 0px. An easier way is just using slideUp().
<script type="text/javascript">
$('#loginButton').click(function(){ $('#toplogin').slideUp(); });
</script>
try this:
$('#loginButton').click(function() {
$('#toplogin').animate({
height: 0
},
function() {
$(this).css('display', 'none');
});
});
you should wrap your code in following construction to make it valid as jQuery code:
$(document).ready(function(){
your code;
})

Categories