I have an image and a button, whenever I press the button the image disappears. So I'd like to make it by a fade effect. Something like this:
#hide{-webkit-transition: all 1s ease-in-out;}
Here is the demo: http://jsfiddle.net/5wBuV/4/
In jQuery all you have to do is:
$("#hide").fadeOut("slow"); //or fast, or specific speed in milliseconds
//you can even throw a callback function if you need to
Or you can keep the javascript you had:
document.getElementById("hide").style.visibility = "hidden"; //or display = "none";
http://jsfiddle.net/5wBuV/5/ updated your fiddle
Use some JS:
$('#hide').fadeOut('slow');
If you want more advanced way, see more in Jquery Animate
For animate effect, you can google "jquery easing"
Using jQuery fadeOut():
$("#clickedButton").click( function() {
$('#hide').fadeOut('1000');
});
FIDDLE HERE
Related
I have a text box in my HTML file that I'd like to make fade away when a button is clicked. Here is what I have so far:
$("#textButton").click(function() {
// make text dissapear here
});
The id of the text box is textBox. What should I put in the function to make this work?
In your case, your code would look something like this:
$("#textButton").click(function() {
$("#textBox").fadeTo('slow', 0);
});
You use the fadeTo() method in jQuery. The first value would be the speed, and the second value would be how faded you would like it (0 making it disappear).
You can use the following links to explore more about fadeIn & fadeOut functions.
https://api.jquery.com/fadeout/
https://api.jquery.com/fadein/
Code example:
$(document).ready(function(){
$("#textButton").click(function() {
$("p").fadeOut();
);
$("#textButton2").click(function() {
$("p").fadeIn();
});
});
I am trying to make a simple game about sliding ice-blocks. However, I tested this JSFiddle and I want to "hide" the image/button on the line alert('Game starts!');. I tried startButton.style = "visibility: hidden;"; but it didn't work...
I only need to resolve this problem, I know how to code the game itself :)
Adding this after the alert seems to work.
this.style.display = 'none';
updated Fiddle
try document.getElementById("startButton").style.display="none"
try
document.getElementById("startButton").style.visibility = 'hidden';
HTMLElement.style reference (MDN)
You can also use jQuery UI, which has a "hide" method. You can then simply say
$('.startButton').hide()
You can even apply different effects.
However, this will set the visibility to none, removing the object from the DOM. If you don't care about that, it's fine, but it should be borne in mind.
startButton.onclick = function()
{
startButton.style.visibility="hidden";
/* OR
startButton.style.display="none";
*/
alert('Game starts!');
}
I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks
Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});
You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});
I'm trying to do a simple slide out effect, then add a class with display:none;
But for some reason, the jQuery animation is completing instantly, instead of using the duration as the docs say. I tried using different values, and 'slow' / 'fast'.
Looking at the source in Chrome's developer tools, the DOM is updated instantly. Removing the callback doesn't make the animation work either, it just does nothing in that case.
$('.type-panel').slideDown(500, function () {
$(this).addClass('panel-hidden')
});
<div class="ed-panel type-panel">
//bunch of stuff
</div>
What am I missing?
(I have jQuery and jQueryUI referenced)
I think you meant to use .slideUp() to hide it.
$('.type-panel').slideUp(500, function() {
$(this).addClass('panel-hidden');
});
Notice, .slideUp() will add automatically set the display to none.
I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.