Div fading in and out - javascript

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');
});
});

Related

How to make a simple fade in/out panel with jQuery?

I'm trying to make a text fade in and fade out, alternately, as you click a button, using jQuery. I came up with this code:
$("button").click(function() {
$('#p1').fadeIn();
$("button").click(function() {
$('#p1').fadeOut();
$('button').off("click");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Button</button>
<p id='p1'> Paragraph </p>
That works only once (fades in first click, fades out second) and the button stops working forever.
If I comment out line 5, the button works once and everytime I press it again, the text fades in and out at the same time, which is not what I want.
What am I doing wrong?
Well, fadeToggle() is the way to go here.
But if I wanted to use only fadeIn and fadeOut for some reason... I solved it this way:
var clickCount = 0;
$('button').click(function() {
if (clickCount % 2 == 0) {
$('#p1').fadeIn();
}
else {
$('#p1').fadeOut();
}
clickCount++;
});
There is a method fadeToggle() which toggles between fadeIn and fadeOut.
$("button").click(function() {
$('#p1').fadeToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button>Button</button>
<p id="p1">Paragraph</p>

jQuery - Hiding One Div & Showing Multiple Other Divs

http://jsfiddle.net/cEJtA/
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
Can anyone please help with this code.
I want 5 divs that work based on the link that's clicked, so there are 5 divs either shown/hidden.
I can do everything except the if/else statement for more divs - any help please?
Off the top of my head, you can add a data attribute on the class and use that to toggle the targeted div element.
$(function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
$("a").bind("click", function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
<div class="div3">I'm div3</div>
<div class="div4">I'm div4</div>
<div class="div5">I'm div5</div>
</body>
</html>
you could also get the current element's class, parse it and generate div class name off of it and use that to show/hide things. e-g
link1 => div1 (replace link with div)
Try this way
<html>
<body>
Link 1
Link 2
<div id="link1" class="commonDiv">I'm div1</div>
<div id="link2" class="commonDiv">I'm div2</div>
</body>
</html>
$(function () {
$(".commonDiv").hide();
$(".link1, .link2").bind("click", function () {
$(".commonDiv").hide();
var id = $(this).attr("class");
$('#' + id).show();
});
});

jquery toggle animations / in reverse order

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>

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/

Add slide to toggle

I am trying to add a slide effect to my toggle script
<script>
function clickitems() {
// action 1
if( document.getElementById('spoiler2').style.display=='none' ){
document.getElementById('spoiler2').style.display='block';
}
else{
document.getElementById('spoiler2').style.display='none';
};
// action 2
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script>
But so far without success, can anyone help me out ? Much appreciated
The elements spoiler and spoiler2 are simple div elements
<div id="spoiler" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
<div id="spoiler2" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
The buttons are <a class="button" onclick="clickitems()">Items</a>
And yes i could have gone with a paragraph tag instead of a link
Ok, so far i got this,
A JavaScript to close the other and Jquery open element while toggling the selected element
<script>
function clickitem() {
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script> </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#spoiler2").slideToggle("slow");
});
});
</script>

Categories