Is there a way to animate new DOM elements without having to hide them first? If so, how?
For example, what I'm doing now is:
$(document).ready(function() {
$(document).on("click", ".link", function(event) {
event.preventDefault();
var count = 1;
$.ajax({
url: 'php/get_data.php',
type: 'POST',
dataType: 'json',
data: { total_count: count },
success: function(data) {
$(".new-elements").append(data).hide().slideDown(function() {
}
});
});
});
Thanks.
Yes, you try to add css (for default for these elements) for example display: none or if you prefer opacity: 0 only, then you try to animate them.
Related
Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.
Like this FIDDLE
I want to make when i hover first image then .ajax-loading activated for only that image. and if i hover second image then .ajax-loading active for only second image ext..
Anyone can help me here ?
CSS
.ajax-loading {
transition: all 0.3s;
opacity: 0;
z-index: -1;
}
.ajax-loading.active {
opacity: 1;
z-index: 100;
}
and AJAX
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
beforeSend: function() {
$('.ajax-loading').addClass('active');
},
success: function (returnHtml) {
e.find('.user-container').empty().html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
}).complete(function() {
$('.ajax-loading').removeClass('active');
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
The problem is that the beforeSend function activate the class active for all the elements with the class .ajax-loading.
Since you're passing the jQuery object that is receiving the hover to the function, you can take advantage of that and add the class active only to those elements with the class .ajax-loading under it.
beforeSend: function() {
$('.ajax-loading',e).addClass('active');// Note the ,e that I added
},
Fiddle
Hope it helps.
i want to simply show the content after load not fadeIn how is it possible?
$(function() {
$('.hovers').click(function(event) {
var target = $(this).attr('href');
window.location.hash = target;
$.ajax({
url: target,
success: function(data) {
$('#allcontent')
.fadeOut('slow', function() {
$(this).html(data).fadeIn('slow');
});
}
});
return false;
});
});
maybe i use .show() ?
Thanks for help
success: function(data) {
$('#allcontent').html(data).show();
}
Just fadeIn 0 , which happens immediately
$(this).html(data).fadeIn(0);
also you might want to do this
$(this).html(data).delay(2000).fadeIn(0);
adding a delay of 2 seconds or however much you want, and then show immediately
I have this code
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
Every time someone click on this button I want a image to load for like 1 sec
so the user knows that something happened..
any kind of help is appreciated
Something like:
var $loader = $('<img src="loader.gif">').appendTo(document.body);
And then
success: function (data) {
setTimeout(function() {
$loader.remove();
data = eval(data);
$this.addClass('productSelected');
},1000);
}
It will show the image for 1sec + the ajax loading time. Although, as a visitor of your site I would probably prefer to skip the 1sec delay...
Add before send like this :
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
SetTimeout(1000, function(){
$("#one_sec_img").hide();
})
}
But, I think your requirement is something normal :
Here, bcoz of the before send, as soon as you click button that triggers ajax, the image will be loaded, and on success, the image can be hidden . This is the usual process, in this case,setTimeout is not needed . But, if your requirement is something like, the image should appear only one sec, you can use set timeout. Otherwise, below code is enough.
beforeSend: function(){
$("some element").append("<img src='url' id='one_sec_img' />");
},
success: function(res){
$("#one_sec_img").hide();
}
<script type="text/javascript">
$(function () {
$(".a").live("click", function () {
var html=$(this).html();
$(this).html('loading');//<img src="" />
var $this = $(this),
ProductImageId = $this.data('ProductImageId');
$.ajax({
url: '/Home/AddToCart',
type: "post",
cache: false,
data: { ProductImageId: ProductImageId },
success: function (data) {
$(".a").html(html);
data = eval(data);
$this.addClass('productSelected');
},
error: function (result) {
$(".validation-summary-errors").append("<li>Error connecting to server.</li>");
}
});
});
try this.
Use jQuery BlockUI Plugin to show the image, may be it solve your problem.
Try:
$(".a").click( function( ) {
$("#idOfImage").show().delay( 1000 ).hide();
// ajax call
});
else if you only want the image to disappear only after the ajax call
$(".a").click( function( ) {
$("#idOfImage").show();
$.ajax({
// parameters
}).done( function( ) {
$("#idOfImage").hide( );
});
});
The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.
Fixed, there was a issue with jquery I was including.
i know how to write code for jquery fadein effect.
suppose i have a html element store in variable.
like
var sHtml="<div>Other content</<div><div id='frm'>hello</<div>"
modal.load(jQuery(sHtml).find('#frm')fadein().html());
i first find the desired div and use the fadein effect when i am assigning the div inside modal box. but it is not working. cany anyone suggest me to do it proper way. i want that when i will set the content into modal box then first i will show a fadein effect and then set the content.
Here i am giving my code
var modal = "";
var sHtml = "";
jQuery.noConflict();
jQuery(document).ready(function () {
jQuery("#btnFeedback1").click(function () {
var modal = new LightFace({
draggable: true,
height: 'auto',
width: 'auto',
title: 'Login',
content: '<div class="BusyStyles"><div>',
buttons: [
{ title: 'OK', event: function () {
if (Validate()) {
if (Save()) {
this.close();
}
}
}
},
{ title: 'Close', event: function () { this.close(); } }
]
}).open();
//}).open();
jQuery.ajax({
type: "POST",
url: "Login_LightFace.aspx/GetHtml",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
sHtml = data.d;
//modal.options.width = 'auto';
//modal.options.height = 'auto';
modal.load(jQuery(sHtml).find('#frm').fadeIn().html());
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
return false;
});
});
There is no such effect in jquery as fadein but there is fadeIn (capital I). Also you missed a dot before fadeIn()
I dont know what is that modal.load but when you are adding new thing to somewhere and want to have fadeIn type of effect, you should first just hide the element you just added (or have style="display:hidden") and then use fadeIn on it.
Add an event handler like this:
modal.load(function() { ...event handling code here...; });
If you don't wrap it in a function(){} it will run immediately instead of when the event fires.