Tumblr风格的UserHoverCard
大家好，我有一个问题与ajaxhover。 我正在尝试像tumblr一样创建userHoverCard。 但是当我将它与ajax一起使用时，hover动画无效。
这是工作DEMO没有ajax只有CSS。 在此演示中，您可以看到当您hover图像时，然后.p-tooltip将以动画效果打开。
但是，如果您从我的测试页面单击此演示 ，那么您可以看到当您hover图像时.p-tooltip将无法打开动画效果。
HTML
这是我的ajax代码：
$(document).ready(function() { function showProfileTooltip(e, id){ e.append($('.p-tooltip').css({ 'top':'20', 'left':'80' }).show()); //send id & get info from get_profile.php $.ajax({ url: 'get_profile.php?uid='+id, beforeSend: function(){ $('.p-tooltip').html('Loading..'); }, success: function(html){ $('.p-tooltip').html(html); } }); } function hideProfileTooltip(){ $('.p-tooltip').hide().fadeIn('fast'); } $('.summary a').hover(function(e){ var id = $(this).attr('data-id'); showProfileTooltip($(this), id); }, function(){ setTimeout(function(){ hideProfileTooltip(); },2000); }); });
这是CSS代码：
.summary { margin: 50px auto 0; width: 50px; height: 50px; position: relative; } .profile-ava { width: 50px; height: 50px; background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80); border-radius: 3px; background-size: 50px 50px; display: block; } .summary a:hover:before { content: ''; position: absolute; display: block; bottom: -10px; left: 0; height: 10px; width: 100%; z-index: 2; } .p-tooltip { position: absolute; margin-top: 10px; top: 100%; left: 50%; margin-left: -140px; width: 280px; max-height: 120px; border-radius: 5px; overflow: hidden; background-color: #F0F0F0; visibility: hidden; opacity: 0; transition: all 0.5s ease; } .profile-header { height: 120px; background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500); background-size: auto 120px; background-position: 50%; } .profile-navigation { position: absolute; top: 0; left: 0; padding: 10px; width: 100%; box-sizing: border-box; } .profile-nick { color: #fff; margin: 0; padding: 0.4em 0; font-size: 0.8em; font-weight: bold; } .profile-action { float: right; background-color: #eee; padding: 0.4em; border-radius: 2px; color: inherit; text-decoration: none; font-size: 0.8em; font-weight: bold; } .p-tooltip .profile-ava { margin: -40px auto 0; width: 80px; height: 80px; background-size: 80px; border: 3px solid #F0F0F0; border-radius: 5px; } .profile-info { text-align: center; padding: 10px; opacity: 0; } .profile-title {font-size: 1.6em; margin: 0;} .profile-description { margin: 0; font-size: 0.8em; } .profile-items {margin: 0px; padding: 10px;} .profile-items:after { content: ''; display: table; clear: both; } .profile-items li { width: 80px; height: 80px; background-size: cover; background-position: center; float: left; display: block; border-radius: 3px; } .profile-items li:not(:first-child) {margin-left: 10px;} .profile-items li:nth-child(1) { background-image: url(http://sofzh.miximages.com/javascript/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY); } .profile-items li:nth-child(2) { background-image: url(http://sofzh.miximages.com/javascript/B7pkXfgCIAAwoY0.jpg:thumb); } .profile-items li:nth-child(3) { background-image: url(http://sofzh.miximages.com/javascript/B7A3NHjIIAIt6eg.png:large); } .profile-header { -webkit-transform: translate(0, -50px); -moz-transform: translate(0, -50px); transform: translate(0, -50px); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; opacity: 0; } .profile-info { -webkit-transform: translate(0, 50px); -moz-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .p-tooltip .profile-ava { -webkit-transform: scale(0.5) translate(0, -10px); -moz-transform: scale(0.5) translate(0, -10px); transform: scale(0.5) translate(0, -10px); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; opacity: 0; } .profile-items li { -webkit-transform: translate(0, 50px); -moz-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 0; } .profile-items li:nth-child(2) { -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } .profile-items li:nth-child(3) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .summary:hover .p-tooltip { visibility: visible; opacity: 1; max-height: 600px; } .summary:hover .profile-header, .summary:hover .profile-info, .summary:hover .p-tooltip .profile-ava, .summary:hover .profile-items li { -webkit-transform: translate(0,0) scale(1); -moz-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1); opacity: 1; }
任何人都可以帮助我！
从本质上讲，我已经创建了一个非常聪明的解决方法。 在加载html之前，它是一个覆盖图像（不可见）的掩码，然后在降低z-index之后发生hovercss。 hoverjavascript在容器上。
小提琴
.summary { margin: -50px auto 0; width: 50px; height: 50px; position: relative; z-index: 0; } .summary-mask { margin: 50px auto 0; width: 50px; height: 50px; position: relative; z-index: 1; } .loaded .summary-mask { z-index: -1; }
HTML
JS
var response = ' Username
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..
'; $(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', success: function (returnHtml) { e.find('.user-container').html(returnHtml).promise().done(function () { $('.the-container').addClass('loaded'); }); } }); } function hideProfileTooltip() { $('.the-container').removeClass('loaded'); } $('.the-container').hover(function (e) { var id = $(this).find('.summary').attr('data-id'); showProfileTooltip($(this), id); }, function () { hideProfileTooltip(); }); });
当您显示卡时，它仅包含加载消息。 当内容到达并且您将其放入卡中时，这不是CSS更改，因此不会激活转换。
如果你等到内容到达以显示卡片，就会有动画效果。