Here's the fiddle for the below.
The reason for creating this jsfiddle is that animate() doesn't work inside the fadeOut() function, but works outside :
$(".fader").click(function (e) {
var self = this;
$('.fader').not(self).fadeOut(function () {
$(self).animate({top: "220",left: "200"}); // doesn't work
LoadContent(fader.attr('id')); // works
});
$(this).animate({top: "220", left: "200"}); // works
});
EDIT: ok I see the reason now that animate() didn't run - I was calling the wrong element (this instead of self which jsfiddle corrected). but still I don't know why toggle() doesn't work in jsfiddle.
Your jsFiddle is wrong. First of all You don't use any jQuery library, as the file you are refering to in first line does not exist. Second is that You are trying to apply click event to object with class .fader but not the one that was clicked. And there is no other object with that class. Use parents() instead. And function (as u call) "inside" fadeOut is triggered at the end of fadeOut so your code is kind of senseless.
If you want to animate and fadeout at same time, use only animate:
$('.fader').animate({ opacity: 0, top: "-1000px", left: "-1000px" }, 'slow');
Related
I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?
The toggle-event is deprecated in version 1.8, and removed in version 1.9
Try this...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed, jQuery docs.
The .toggle() method is provided for convenience. It is relatively
straightforward to implement the same behavior by hand, and this can
be necessary if the assumptions built into .toggle() prove limiting.
For example, .toggle() is not guaranteed to work correctly if applied
twice to the same element. Since .toggle() internally uses a click
handler to do its work, we must unbind click to remove a behavior
attached with .toggle(), so other click handlers can be caught in the
crossfire. The implementation also calls .preventDefault() on the
event, so links will not be followed and buttons will not be clicked
if .toggle() has been called on the element, jQuery docs
You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.
Live Demo
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.
Live Demo
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Make use of jquery toggle function which do the task for you
.toggle() - Display or hide the matched elements.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
this will work for u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
You can use this code for toggle your element
var ele = jQuery("yourelementid");
ele.slideToggle('slow');
this will work for you :)
You can use .toggle() function instead of .click()....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});
Live Demo
I am using the tooltipster plugin to have tooltip on hover.
My code is posted in this jsfiddle, for some reason the tooltip wouldn't work on the first try, e.g. if you click Run in jsfiddle and move your pointer over the div that says
Hover over me
Nothing happens but if you move your pointer away and then back on hover, it works. Why doesn't it work on the first try?
Thanks.
because you have declerad tooltip plugin on hover function. after declared it can run. so if you move this code to outside of hover function it will work.
$('.tooltip0').tooltipster({
content: $('<div id="mikrah">test hover div</div>'),
delay: 0,
theme: 'tooltipster-shadow',
contentAsHTML: true
});
fiddle
As stated in the hover() documentation,
.hover( handlerIn, handlerOut )
Where the handlerOut is a function to execute when the mouse pointer leaves the element.
Thus the second function, that shows the text, will fire after you leave the image with the mouse.
Try this:
$('.tooltip0').tooltipster({
content: $('<div id="mikrah">test hover div</div>'),
delay: 0,
theme: 'tooltipster-shadow',
contentAsHTML: true
});
$('.tooltip0').hover(
function () {
$('#students').attr('src', 'http://www.impexsoftdesign.com/images/stories/weird-and-funny-facts/lion.jpg');
},
function () {
$('#students').attr('src', 'http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/Lion_iStock_XSmall-300x300.jpg?24a0bc');
});
You were starting the tooltipster inside the inHandler in the hover, so, first time it initializes the tooltipster and only on the second hover it runs..
I made a toggle button with pure CSS/jQuery and all works perfectly. The problem comes when I duplicated it and tried to toggle it. As supposed, the toggles 'toggled' at the same time, here is my code so far:
HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
Or the Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
This is how it works, when you click the toggle it detects if it has a class called "detector". If it doesn't, it animates the toggle and creates one. If it does, that means that the class was previously created so it animates back the toggle and removes the class.
Ok, the problem starts when I duplicate the toggle. I have now two of them which I want to activate individually. The easiest solution was using :eq() jQuery selector or .eq() jQuery function which people classified as a more 'correct' option.
So I add it to the code of the second toggle but it didn't worked. In the fiddle above you can test it by yourself. Please if someone know which is the problems, let me know, thanks!
EDIT: I already used :eq() selector but it didn't work either.
EDIT 2: I use a different detector class called "detector-1" to prevent it from interfering with the other one.
$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
using the this selector, you need to define the click handler only once - and it still works for endless numbers of buttons...
"see working fiddle"
forgot to mention. i changed the css in your fiddle, since the background image didn't show up, i created a white circle via css...
I figured out how to make it thanks to #BhushanKawadkwar
I had to use the :eq() selector on the click function and .eq() function in the other ones. I don't know why, but it works, here's the working fiddle:
http://jsfiddle.net/ew0s6nqd/2/
I am working on the code below. Why am I not able to hide the #legend
div by this way?
$("#icon").on("click",function(){
$("#legend").hide('slide', {direction: 'left'}, 1000);
});
I also tried the animation way but it didn't work either.
I think you have used the syntax wrongly.. Just try like,
$(selector).hide(speed,easing,callback);
Please refer the jQuery document here...
I have updated a fiddle here... Please check this..
Hint: Here callback is a function which is executed after the animation completes. But it is not mandatory.. you can also leave this parameter..
Updated a Fiddle here with jQuery UI animation...
You can use the animate() method for that,
$('#legend').animate({width: '0'}, 1000, function(){
$(this).hide();
});
Check the Demo.
Everything works fine except one thing, I'd like it so when you have the .show class already visible, it will fade again when you click on another of the #c- divs.
http://jsfiddle.net/7KdR6/1/
$('[id^="c-"]').each(function(i){
$this = $(this);
$(this).text(i);
$(this).on('click',function(){
$('.show').fadeIn().text(i);
event.stopPropagation();
});
})
$(document).on('click', function(){
$('.show').fadeOut();
});
One of your problems is that you are not stopping the propagation because event is not being defined. You'll have to use the parameter for the click handler. Edit: Actually, it looks like event is automatically passed - I did not realize this before now. However, I still think it best to put the event object as the parameter if you are going to use it - jQuery does this in their examples and it makes it more obvious.
I also notice you are caching this but then not using that cached var. This means that every time you write $(this), it will have to rewrap that jquery object.
Then you can have a fadeOut and use the fadeIn as a callback for the fadeOut. This way if the .show element is already shown, it will fadeOut first. I'd write it like this:
$('[id^="c-"]').each(function (i) {
$this = $(this);
$this.text(i);
$this.on('click', function (event) {
event.stopPropagation();
$show = $(".show");
$show.fadeOut(function () {
$show.fadeIn().text(i);
});
});
})
Fiddle
You need to hide the element before using fadeIn on a visible element
$('[id^="c-"]').each(function (i) {
var $this = $(this);
$this.text(i);
$this.on('click', function () {
$('.show').hide().fadeIn().text(i);
event.stopPropagation();
});
})
Demo: Fiddle
Try calling .hide() before calling .fadeIn().
DEMO FIDDLE