Question

我正在尝试做一些JS动画，但是失败了。

基本上我有3个链接彼此相邻。前两个只是在新窗口中打开的链接。点击后的第三个按钮需要向左滑动，并覆盖它的邻居，显示默认隐藏的span（URL）。

我已经设置了一个基本的codepen示例：

http://codepen.io/anon/pen/EsojF

我们的想法是，按下第三个按钮将填充整个UL的宽度，坐在其他链接的顶部，或者它们可以滑动到零宽度，然后应显示span内的URL （理想情况下，链接也会复制到剪贴板，但尚未考虑该路线）。

任何人都可以提供任何指示吗？我的客户有很多用户仍在使用IE9，所以我认为javascript或jquery是最好的方法吗？

Answer 1

修改，更新

尝试（v2）

jQuery(document).ready(function () {
    jQuery('.get-url a').click(function (e) {
        // cache selector
        var elem = jQuery(this);
        // `elem` parent sibling `li` elements
        var parents = elem.parent("li").siblings();
        // set `width` of `elem` parent `li`
        var width = parseInt(elem.parents("ul").css("width")) * .6;
        // toggle `parents` ,
        // set `width` of `elem` parent `li`
        // toggle `url-reveal` `span`
      if (elem.find(".url-reveal").css("display") === "none") {  
               // added minimal slide effect         
               parents.toggle(-1000).promise()
               .done(elem.children('span').toggle(200)                              
               , elem.parent("li").animate({width: width }, -200));
        } else {
               // reverse toggle
               parents.toggle(-1000).promise()
               .done(elem.children('span').toggle(-2000, "linear")
                 , elem.parent("li").animate({width: "100"}, -1000, "linear"))           
        }
        e.preventDefault();
    });
});

＆＃13;

jQuery(document).ready(function () {
    jQuery('.get-url a').click(function (e) {
        // cache selector
        var elem = jQuery(this);
        // `elem` parent sibling `li` elements
        var parents = elem.parent("li").siblings();
        // set `width` of `elem` parent `li`
        var width = parseInt(elem.parents("ul").css("width")) * .6;
        // toggle `parents` ,
        // set `width` of `elem` parent `li`
        // toggle `url-reveal` `span`
      if (elem.find(".url-reveal").css("display") === "none") {
        
               parents.toggle(-1000).promise()
               .done(elem.children('span').toggle(200)                              
               , elem.parent("li").animate({width: width }, -200));
        } else {
               parents.toggle(-1000).promise()
               .done(elem.children('span').toggle(-2000, "linear")
                 , elem.parent("li").animate({width: "100"}, -1000, "linear"))            
        }
        e.preventDefault();
    });
});

＆＃13;

.url-reveal {
    display: none;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}
ul li {
    width: 100px;
    padding: 10px;
    display: inline-block;
    background: #c50000;
    margin: 0;
}
ul li a {
    color: #fff;
    text-decoration: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li><a href="http://www.google.com">Google</a>
    </li>
    <li><a href="http://www.facebook.com">Facebook</a>
    </li>
    <li class="get-url"><a href="#"><span class="label">Get URL</span> <span class="url-reveal">http://www.longURLGoeshere.com</span></a>
    </li>
</ul>

＆＃13;

Answer 2

如果你记得通过制作相对的东西你可以移动它在屏幕上的位置而不在DOM中移动它，然后记住默认情况下溢出是可见的你可以计算出父节点偏移并使跨度增长到它的父节点之外

我修改了您的codepen以使其正常工作：http://codepen.io/anon/pen/Czwlk

然而，我的真正答案是重新编码并采取另一种观点，而不是使链接增长，为什么不用新的临时链接覆盖所有三个链接：

jQuery('<span>Long Url</span>').insertAfter(this);

假设您没有为用户手动共享链接而是注入纯文本网址。

回答2！

我编码的方式如下。首先，我将父UL设置为显示内联块，以便紧密包裹链接，然后将其置于相对位置。然后，当点击链接时，我将输入字段注入到绝对位置的链接之后 - 这样我就可以填充UL并完全覆盖所有链接。正如您可以看到额外的糖，我也会集中注意并选择输入，以便用户可以将其复制并粘贴到他们想要的位置。您需要完成代码的所有内容决定了之后如何关闭工具提示。最简单的方法是在工具提示中添加一个关闭图标，其中.remove（）点击工具提示。因为它不会影响链接，它仍然可以工作，并在需要时注入一个新的div。

在这里演示：http://codepen.io/anon/pen/dkGAy

这里有完整的动画演示：http://codepen.io/anon/pen/iFmeu

按钮单击会在其他元素上展开，以显示更长的文本字符串

2 个答案: