I have an Animation with Animate.css
$('#log-circle').addClass('animated flipInY');
This animation occurs on Page Load - no problem
But I want to reload the same animation when the user hover a submit button.
My initial idea is to reload the animation on CLICK, (if its possible will be perfect) - but I think that animation will never occurs because with the click on submit button the page will change to another..
then I'm trying to reload the animation on hover - like:
<script>
$( ".log-btn" ).hover( function() {
$('#log-circle').addClass('animated flipOutY');
});
</script>
but nothing happens..
IMPORTANT: THE ANIMATION OCCURS iN A IMAGE. (not in the button)
thank for all help!
http://jsfiddle.net/j03hgtae
Daniel
Using .addClass().removeClass() won't actually trigger the animation. The easiest way to re-trigger a CSS animation is to clone the element.
$('#log-circle').addClass('animated flipInY');
$('#log-btn').hover( function() {
// Clone the original element
var element = $('#log-circle'),
clone = element.clone(true);
// Insert the cloned element before the original element
element.before(clone);
// Remove the original element
element.remove();
});
See the updated fiddle
And, as stated in the first answer, you were targeting .log-btn instead of #log-btn.
You are targeting .log-btn, but no such class exists.
<button type="submit" **class="btn btn-sm input-group-sm**" style="width: 160px; margin-bottom: 10px; margin-top: 10px" **id="log-btn"** name="log-btn">Login</button>
$( ".log-btn" ).hover( function() {
$('#log-circle').RemoveClass('animated flipOutY');
$('#log-circle').addClass('animated flipOutY');
});
Instead, you should be targeting #log-btn, as the button (see below) is using an ID identifier as opposed to a Class identifier.
$( "#log-btn" ).hover( function() {
$('#log-circle').RemoveClass('animated flipOutY');
$('#log-circle').addClass('animated flipOutY');
});
Your solution is to replace ( ".log-btn" ).hover with ( "#log-btn" ).hover. Alternatively, consider adding a class named "log-btn" to the button element.
Related
I want to create a flashing effect. When user click the flashing element, it will be disappeared. However, it seems not every "user's click" can fire the "click event". Sometimes, when I clicked the flashing element, it didn't disappear. I thought the reason is a hidden element can not be clicked. Just like this article says CSS: Is a hidden object clickable?. So, is there other methods to make the flashing element disappeared immediately when user clicks the element?
var flashToggle = setInterval(function() {
$("div").toggle();
}, 200)
$("div").on("click", function(e) {
clearInterval(flashToggle);
$(this).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Flashing element</div>
Put the flashing element inside another element, and put the handler on that parent element. Also, you might change the visibility property of the flashing element, not the display of the flashing element, so that it doesn't change the layout of your page every time it appears or disappears.
const child = $('#child');
let visible = true;
var flashToggle = setInterval(function() {
visible = !visible;
child.css('visibility',
visible
? 'visible'
: 'hidden'
);
}, 500)
$("#container").on("click", function(e) {
clearInterval(flashToggle);
$(this).hide();
})
div {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="child">Flashing element</div>
</div>
Yes, hidden/toggle will hide elements by setting the css display. When hidden, elements can not receive clicks. You can try the following:
Use .css('visibility','hidden|visible') instead. This is recommended as it does not have the side effect of changing container size and causing jiggling of other elements.
Wrap your flashing element inside a container element, register the click on the container element instead.
$(this).hide(); ---> $("div").hide();
I think this might be what you're looking for: $("my-element").click()
Try to use opacity : 0|1 instead of display: none / visibility: hidden.
On click event on opacity: 0 worked for me.
It worked for me.
How can I make a figure element collapsible, without adding an extra button?
<figure><img src="abc.png"></figure>
By default, I would like to place a button to open the image at this point. Can this button be generated automatically?
You can use the slideToggle() function assuming you have jQuery included (HIGHLY RECOMMEND).
Then you can simply do:
$( "#myButton" ).click(function() {
$( "figure" ).slideToggle( "slow" );
});
You will need to of course add a button. You could append one with jQUery (automatically) or you can edit the HTML to get it there.
Here is the HTML way
<button id="myButton">Click Me</button>
Here is the jQuery way (untested)
$('figure').append("<button id='myButton'>Click Me</button>");
Best of Luck to You! (again this is all untested)
Come to think of it you probably want after() instead of append()
because your button will disappear after you toggle once.
Use this
$('figure').after("<button id='myButton'>Click Me</button>");
Link to jQuery slideToggle: http://api.jquery.com/slidetoggle/
Check out this simple code snippet to toggle image using figure element itself
$('#accordian_img').click(function () {
$('.img-toggle').toggleClass("show"); // toggle show class to image element
});
/* Image style to show and hide */
.img-toggle.show {
display:block;
}
.img-toggle {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="accordian_img" style="width:400px;cursor:pointer">
Click To Toggle Image
<img class="img-toggle" src="http://placehold.it/400x150">
</figure>
I have a button, and what I have is when you click on it, and new element "drops" in. So what I want to do is when you press it again it goes back. As essentially fades out. Here's what I have so far \
$(".icon-search").click(function(){
$(".search").css('height', '100px')
});
When you click on the icon, the black shape goes to 100px. And what I want to do, is get rid of it, by clicking on it again. I've seen other stuff online, but none seemed to work.
Here's a demo http://jsfiddle.net/PHX3A/
JSFiddle
.toggleClass() will do the trick for you.
.toggleClass() :
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the switch argument.
JavaScript :
$(".icon-search").click(function(){
$(".search").toggleClass("doHeight");
});
CSS :
.doHeight{
height:100px;
}
for further information in using .toggleClass() click here
2nd Option :
JSFiddle
using .toggle() reference : toggle
JS :
$( "div" ).click(function() {
$( ".search" ).toggle( "slow" );
});
Use toggleClass function to set the CSS. In this example, I added CSS to the toggle class
Try this:
JQuery:
$(".icon-search").click(function(){
$(".search").toggleClass('toggle')
});
CSS:
.toggle{
height:100px;
}
JSFiddle Demo
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
I have following code:
HTML:
<div class="one">Content</div>
<div class="two">Content</div>
I want to hide my second div when mosueleave event happen from first div and also the mouse don't have over second div.
Algorithm:
if ((mouseleave from div.one) && (mouse not on div.two))
hide (div.two);
How can I implement this snippet using jquery? please help me.
You can set a flag on the .two div that keeps track of the mouseover state. Then when the mouse leaves .one you check for this state and if it exists you hide the div. Like so:
$(".two").live("mouseenter", function(){
$(this).data("hover", true);
}).live("mouseleave", function(){
$(this).removeData("hover");
});
$(".one").live("mouseleave", function(){
if( !$(".two").data("hover") ) $(".two").hide();
});
enclose both divs in another, say, div class='zero'. so you would have something in your $(document).ready() like
$('.zero').live('hover', function() {
$('.two').show();
});
$('.zero').live('blur', function() {
$('.two').hide();
});
note: you must style="display: none" for div class='two' by default