javascript - Javascript 动画仅适用于列表中的一项
问题描述
我正在练习Javascript
,HTML
我遇到了这个列表项/适配器,就像我们在 android 中调用它们一样。它很棒,但我遇到了挑战。我div
像这样以编程方式将它们添加到我的
$.ajax(
{
type: "GET",
url: "../public/allevents/"+pn,
success: function(data){
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);
for(event in obj.events){
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');
}
addViewListenersToadapters();
},
error: function(xhr, status, error) {
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");
}
}
)
他们添加得很好。但是扩展动画仅适用于第一项,据我所知,这是因为items
使用单个id
所以Javascript
找到了第一项并将动画应用于它。我有这个想法,我可以ids
在添加项目时更改项目的,但是static
javascript
动画有这个,static ids
所以它不会以任何方式工作
function addViewListenersToadapters(){
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
});
我怎样才能解决这个问题?我又是一个学习者,我不知道如何解决它。
解决方案
您可以向#product-cart div 添加一个类
$.ajax(
{
type: "GET",
url: "../public/allevents/"+pn,
success: function(data){
console.log('Events Response::'+data);
var obj = jQuery.parseJSON(data);
for(event in obj.events){
console.log('Event:'+event);
$("#eventHolder").append(
'<div class="make-3D-space">'
+'<div id="product-card" class="product-card">'
+'<div class="product-front">'
+'<div class="shadow"></div>'
+'<img src="'+'..'+obj.events[event].image+'" alt="" />'
+'<div class="image_overlay"></div>'
+'<div id="view_details">View details</div>'
+'<div class="stats">'
+'<div class="stats-container">'
+'<span class="product_price">FREE</span>'
+'<span class="product_name">'+obj.events[event].title+'</span>'
+'<p>'+moment(obj.events[event].starts).utc().format('DD MMM, YY [at] hh:mm A')+'</p>'
+'<div class="product-options">'
+'<strong>LOCATION</strong>'
+'<span>'+obj.events[event].address+'</span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'</div>');
}
addViewListenersToadapters();
},
error: function(xhr, status, error) {
console.log('Events Response::'+xhr.responseText);
//swal("Error", "Error deleting, try again", "error");
}
}
)
并且不要使用名为 async 的 $(document).ready() 内部函数,它永远不会触发。
function addViewListenersToadapters(){
// Lift card and show stats on Mouseover
$('.product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
}
推荐阅读
- angular - 使用 ng-packagr 组件时“没有 ViewContainerRef 的提供者”
- jmeter - 分布式环境显示 JMeter 错误
- c# - C# webclient 下载最新的CCleaner
- laravel - 提交时出错,提示“找不到对象!”
- selenium - selenium webdriver_有没有其他方法可以在不使用“findElements()”方法的情况下找出网页中存在的 webelements 的数量?
- javascript - JS:单击数组中的对象 --> 显示更多信息
- java - 长时间运行的春季计划任务
- java - 从一个列表填充多个列表
- aws-lambda - 在 aws lambda 中使用 LWA 链接我的技能时,如何从我的数据库中获取设备列表?
- docker - 从什么时候将用户添加到 docker 组不足以执行 docker 客户端并且我每次都需要`newgrp docker`?