在jQuery中切换动画

Question

在jQuery中切换动画

javascriptjqueryhtmlcss

4

我在实现一个功能时遇到了麻烦。

我需要制作一个社交媒体侧边栏，当我点击某个项目时，会从左到右滑出一个带有更多详细信息的栏目。

示例图片请参见

这是我当前代码的片段：

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
    margin-top:10px;
}

.icon-bar-social a {
    display: block;
    text-align: center;
    padding: 6px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar-social a:hover {
    background-color: #F4D7CB;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-instagram"></i></a>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-phone"></i></a>
</div>

- user7274404

Java？还是JavaScript？我认为更可能是后者。 - Hovercraft Full Of Eels

你为了实现这个效果尝试过什么？到目前为止，你只展示了没有细节的显示代码。 - Robert

正如Robert所说，你在这里要求了很多，而且到目前为止，你只展示了一个没有任何逻辑的模板。先尝试自己实现一些逻辑吧。 - Austin Ezell

我尝试过了，但它不起作用，我甚至无法获取图标旁边的文本。这就是为什么我在这里寻求帮助的原因。 - user7274404

2个回答

0

在转向jQuery之前，尝试使用CSS。简单的hover选择器应该可以解决你的问题。

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
}

.icon-bar-social a {
    display: block;
    text-align: center;
    padding: 6px;
    position: relative;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar-social a:hover {
    background-color: #F4D7CB;
}
.icon-bar-social a span { 
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 5px;
    transition: all .25s ease-in-out;
    pointer-events: none;
}
.icon-bar-social a:hover span {
    opacity: 1;
    left: 100%;
    background-color: #F4D7CB;
    pointer-events: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-envelope"></i></a>
        <a href="#"><i class="fa fa-phone"></i><span>555.555.5555</span></a>
</div>

- doppler

你的答案只适用于“电话”图标，而不是所有社交图标。而且提问者想要在点击图标而不是悬停在图标上时起作用。 - Muhammad Omer Aslam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Farhad Bagherlo · Accepted Answer

不需要jQuery，使用这种方法比CSS更好。

通过点击(focus)打开详情。

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
     
}
.icon-bar-social a {
    display: block;
    text-align: center;
    color: white;
    font-size: 36px;
    padding:6px;
}
.icon-bar-social a span {
    position: absolute;
    background-color: pink;
    text-align: center;
    height: 55px;
    width: 0px;
    left: 60px;
    color:#6D565E;
   overflow: hidden;
   margin-top:-6px;
}

.icon-bar-social a:hover {
   background-color: #F4D7CB;
}
.icon-bar-social a:focus i + span {
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 1s;
 animation-fill-mode: both;     
}
@-webkit-keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

/* Standard syntax */
@keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i><span>facebook</span></a>
    <a href="#"><i class="fa fa-instagram"></i><span>instagram</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>envelope</span></a>
    <a href="#"><i class="fa fa-phone"></i><span>phone</span></a>
</div>

鼠标悬停（hover）打开详情。

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
     
}
.icon-bar-social a {
    display: block;
    text-align: center;
    color: white;
    font-size: 36px;
    padding:6px;
}
.icon-bar-social a span {
    position: absolute;
    background-color: pink;
    text-align: center;
    height: 55px;
    width: 0px;
    left: 60px;
    color:#6D565E;
   overflow: hidden;
   margin-top:-6px;
}

.icon-bar-social a:hover {
   background-color: #F4D7CB;
}
.icon-bar-social a:hover i + span {
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 1s;
 animation-fill-mode: both;     
}
@-webkit-keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

/* Standard syntax */
@keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i><span>facebook</span></a>
    <a href="#"><i class="fa fa-instagram"></i><span>instagram</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>envelope</span></a>
    <a href="#"><i class="fa fa-phone"></i><span>phone</span></a>
</div>