[英]Animate table column to hide/show it
I have a very simple table, i try to animate the first column if i press on it. 我有一个非常简单的表,如果我按下它,我会尝试为第一列设置动画。
After the click it should animate to the left, so that it is not fully displayed anymore: 点击后它应该动画到左边,这样它就不再完全显示了:
Then after another click, it should animate back again 然后在另一次点击后,它应该再次动画回来
I tried to achieve this with jquery, but nothing happens: 我尝试使用jquery实现这一点,但没有任何反应:
var main = function() { $boolean = true; $(".test").click ( function() { if ($boolean) { $boolean = false; $(".test").animate ( { 'left':'-=100px' }, "fast" ); } else { $boolean = true; $(".test").animate ( { 'left':'+=100px' }, "fast" ); } } ); } $(document).ready(main);
table { border: 1px solid black; } table td { border: 1px solid black; } table th { border: 1px solid black; } .test { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <th class="test">Filename</th> <th>value</th> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> </table>
Why is it not animating and how can i solve it? 为什么它不是动画,我该如何解决? Thank you
谢谢
Here is a working solution: 这是一个有效的解决方案:
var main = function() { $boolean = true; $(".test").click ( function() { if ($boolean) { $boolean = false; $(".test").animate ( { 'max-width':'10px' }, "fast" ); } else { $boolean = true; $(".test").animate ( { 'max-width':'300px' }, "fast" ); } } ); } $(document).ready(main);
table { border: 1px solid black; } table td { border: 1px solid black; } table th { border: 1px solid black; } .test { color: red; overflow: hidden; max-width: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <th class="test">Filename</th> <th>value</th> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> </table>
If you add on more animating property like opacity, you will see that it works. 如果你添加更多动画属性,如不透明度,你会发现它的工作原理。 So animation is working.
所以动画正在发挥作用
$(".test").click
(
function()
{
if ($boolean)
{
$boolean = false;
$(".test").animate
(
{ opacity: 0.5,
'left':'-=100px'
},
"fast"
);
}
else
{
$boolean = true;
$(".test").animate
(
{ opacity: 0.25,
'left':'+=100px'
},
"fast"
);
}
}
);
Try this and you will see animation working. 试试这个,你会看到动画工作。
You have to add a fixe witdth to your table and add this property : 您必须在表中添加一个修复程序并添加此属性:
table-layout: fixed;
width:200px;
And then you can use this javascript : 然后你可以使用这个javascript:
var main = function()
{
$boolean = true;
$(".test").click(function(){
if($boolean){
$boolean = false;
$( ".test" ).animate({
width:"20px",
}, 1500 );
} else {
$boolean = true;
$( ".test" ).animate({
width:"100px",
}, 1500 );
}
});
}
$(document).ready(main);
You need to animate width not left property. 您需要为宽度而不是左侧属性设置动画。 Try this one :
试试这个:
var main = function(){
$boolean = true;
$(".test").click(function(){
if ($boolean){
$boolean = false;
$(".test").animate({'width':'-=50px'},"fast");
}else{
$boolean = true;
$(".test").animate({'width':'+=50px'},"fast");
}
}
)}
Additionally you should change css for .test like this: 另外你应该改变.test的css,如下所示:
.test {
color: red;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
You cannot change left
or top
for position: static
elements. 您无法更改
position: static
left
或top
position: static
元素。 Try making them relative
position to preserve their real position. 尝试使它们保持
relative
位置以保持其真实位置。
var main = function() { $boolean = true; $(".test").click( function() { if ($boolean) { $boolean = false; $(".test").animate({ 'left': '-=100px' }, "fast" ); } else { $boolean = true; $(".test").animate({ 'left': '+=100px' }, "fast" ); } } ); } $(document).ready(main);
table { border: 1px solid black; } table td { border: 1px solid black; } table th { border: 1px solid black; } .test { color: red; position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <th class="test">Filename</th> <th>value</th> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> <tr> <td class="test">File1</td> <td>Test</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.