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>
Related
I want to show two elements on click, one after the other, whereby a user clicks a button the first element with a class(.show-element-one), is shown and when the user clicks the same button for the second time the second element is shown with class(.show-element-two) , am using the code below to show element one on click but I am stuck with showing the second element on the second click.
jQuery(document).ready(function() {
jQuery('#display-elements').click(function() {
jQuery('.show-element-one,.show-element-two').toggle("slide");
});
});
I will appreciate any guides, thanks.
You can set up a counter variable calculate the modulus value for that to display the element of that two classes in circular manner. Something like the code below:
jQuery(document).ready(function() {
var count = 1;
jQuery('#display-elements').click(function() {
jQuery('.show-element-one, .show-element-two').hide();
if (count % 2 !== 0) {
jQuery('.show-element-one').toggle("slide");
} else {
jQuery('.show-element-two').toggle("slide");
}
count++;
});
});
.show-element-one,
.show-element-two {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
show-element-one
</div>
<div class="show-element-two">show-element-two </div>
Maybe you are missing the definition for .slide CSS class. Try the below code.
$(document).ready(function() {
$('#display-elements').click(function() {
$('.show-element-one,.show-element-two').toggle("slide");
});
});
.slide {
display: none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="show-element-one">show-element-one</div>
<div class="show-element-two slide">show-element-two</div>
<button id="display-elements">Toggle</button>
I have a 'div' tag( by id=go) and write a script which i click on div, then another div (by id=example) will be shown, and show some data:
this is my div :
<div id="go" style="position: relative">Click</div>
<div id="example" style="position: relative"></div>
and the script:
$("#go").click(function () {
$("#example").fadeIn(1200);
$("#count").text('');
setInterval(
function () {
p(); count();
}, 8000);
});
and i want when i click on div(by id= go) agin the div (with id=example) be hide , How can i improve my script to do it?
You can use fadeToggle() to toggle between fadeIn() and fadeOut() here:
$("#example").fadeToggle(1200);
Fiddle Demo
Did you try .toggle()?
Reference is at jQuery docs. AFAIK it does all you need - including animation.
Use .toggle(). Check this
$("#example").hide();
$("#go").click(function () {
$("#example").toggle('slow');
});
DEMO
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');
});
});
So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle
Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/