gpt4 book ai didi

Jquery流沙不缩放

转载 作者:行者123 更新时间:2023-12-01 05:01:16 25 4
gpt4 key购买 nike

一切都按照我想要的方式工作,唯一的问题是当您单击过滤器(一张床/两张床)时它不会缩放,它唯一的褪色。原始的 quciksand 示例在滤镜之间淡入淡出和缩放

这是我的例子 http://theoaks.turnpostadmin.com/floor-plans/

我的代码

    // jQuery Quicksand project categories filtering


jQuery.noConflict();
jQuery(document).ready(function($){
// Clone applications to get a second collection
var $data = $(".portfolio-content").clone();

//NOTE: Only filter on the main portfolio page, not on the subcategory pages
$('.portfolio-main li').click(function(e) {
$(".filter li").removeClass("active");
// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
var filterClass=$(this).attr('class').split(' ').slice(-1)[0];

if (filterClass == 'all-projects') {
var $filteredData = $data.find('.project');
} else {
var $filteredData = $data.find('.project[data-type=' + filterClass + ']');
}
$(".portfolio-content").quicksand($filteredData, {
duration: 750,
easing: 'swing',
attribute: 'data-id', // attribute to recognize same items within source and dest
adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant
useScaling: true, // disable it if you're not using scaling effect or want to improve performance
enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements
selector: '> *',
dx: 0,
dy: 0
}, function() {
});
$(this).addClass("active");
return false;
});
});

这里是原文 http://razorjack.net/quicksand/

最佳答案

您是否将所需的插件添加到您的项目中(如原始网站所述)?

如果没有,请先下载这2个插件:

https://github.com/zachstronaut/jquery-animate-css-rotate-scale/blob/master/jquery-animate-css-rotate-scale.js

https://github.com/zachstronaut/jquery-css-transform/blob/master/jquery-css-transform.js

我知道在主网站上他们说你只需要添加第一个,但我尝试过,直到添加第二个才起作用。然后不要忘记在 head 标签中包含这些插件的链接:

<script type="text/javascript" src="js/jquery-css-transform.js" ></script>
<script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js" ></script>

我希望它能成功;)

关于Jquery流沙不缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9828806/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com