个人中心
gpt4 book ai didi

javascript - 触发两个连续的快速悬停以模拟 CSS/JQUERY 中的脉冲效果

转载 作者：可可西里 更新时间：2023-11-01 13:48:12 25 4
gpt4 key购买 nike

我正在开发一个时间轴css/jquery模块，每个时间节点/检查点由三个同心圆表示，当滚动到检查点或鼠标悬停在其上时，外/第三个圆通过改变其背景显示-color，在悬停事件上，并通过将其背景颜色更改为其外部 div 的颜色来淡出。

我现在的问题是如何模拟两次快速鼠标悬停(比如相隔 0.7 秒)来产生类似脉冲的效果？ See it in action

完整代码如下:

<html lang="us">
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- ------------------------------------ -->
    <!-- SCRIPTS -->
    <!-- ------------------------------------ -->

    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>

   <!-- timedulines SCRIPT -->
    <script type="text/javascript" src="js/draft.js"></script>



    <!-- ------------------------------------ -->
    <!-- STYLESHEETS -->
    <!-- ------------------------------------ -->

    <!-- BOOTSTRAP 3.3.6 STYLESHEET -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  />

    <!-- timedulines STYLE-->
    <link rel="stylesheet" type="text/css" href="css/draft.css" />      

</head>

<body>
    <div class="container-fluid" id="timedulines">
        <div class="time-node" label="2011"></div>
        <div class="time-node" label="2011"></div>
        <div class="time-node" label="2011"></div>
        <div class="time-node" label="2011"></div>
        <div class="time-node" label="2011"></div>

    </div>
</body>     

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100);

body
{
  padding:32px;
  background-color:#f2f2f2;
}

#timedulines
{
    background-color:#999 ;
}

.row
{
    height:600px;
    text-align:center;
}
.circle
{
 border-width:0px;
  border-radius:50%;
}

.inner-box
{
  background-color:#585858;
  color:#fff;
  font-family: 'Alegreya Sans SC', sans-serif;  
  text-align:center;
}
.inner-box .checkpoint-date
{
    font-size:8px;
}


.middle-box
{
background :#9BAD01;
border: 0px #eee 1px;
-webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.65);
box-shadow: 0px 0px 13px 2px #353535;
}

.outer-box
{
background-color:#999; 
}
.outer-box
{
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;

$(document).ready(function()
{

    var timeNodeCount=0;
    var colorPalette=        ['#FEC900','#FF6D00','#9BAD01','#C0116E','#4A6AB5','#B51A1E','#595779'];
var fontToPaddingRatio=0.55;
var innerToMiddleRatio=0.6;
var middleToOuterRatio=0.8;
var innerBoxSize=50; 


/*Build the full HTML structure from the "shortened" one*/
$('.time-node').each(function(i)
{
    timeNodeCount++;
    $(this).prop('id','time-node-'+timeNodeCount);
    $(this).append
    (
    '<div class="row">'+
    '<div class="col-md-2 col-md-offset-5">'+
    '<div class="checkpoint">'+
    '<div class="circle outer-box">'+
    '<div class="circle middle-box">'+
    '<div class="circle inner-box">'+
    '<span class="checkpoint-date">'+$(this).attr('label')+'</span>'+
    '</div>'+
    '</div>'+
    '</div>'+
    '</div>'+
    '</div>'+
    '</div>'
    );
});

$('.time-node').each(function(i)
{
    $(this).find('.middle-box').css('background',colorPalette[i]);
});

var dateFontSize=parseInt($('.checkpoint-date').css('font-size'));

/*Find the adequate font-size that fits into the checkpoint-date span (5px tolerance)*/
while(parseInt($('.checkpoint-date').width())<=innerBoxSize-5)
{           
    $('.checkpoint-date').css('font-size',++dateFontSize);
}

/*Inner box*/
var innerBoxFontSize=$('.checkpoint-date').height();

$('.inner-box').width(innerBoxSize);
$('.inner-box').height(innerBoxSize);
$('.inner-box').each(function(i,v)
{
    v.style.setProperty('padding-top',(innerBoxSize-innerBoxFontSize)/2-5,'important');
});

/*Middle box*/
var middleBoxSize=innerBoxSize/innerToMiddleRatio;

$('.middle-box').width(middleBoxSize);
$('.middle-box').height(middleBoxSize);

/*Outer Box*/
var outerBoxSize=middleBoxSize/middleToOuterRatio;

$('.outer-box').width(outerBoxSize);
$('.outer-box').height(outerBoxSize);

/*Center the circles in each others*/       
$('.middle-box').each(function(i,v)
{
    v.style.setProperty('padding',(middleBoxSize-innerBoxSize)/2,'important');
});
$('.outer-box').each(function(i,v)
{
    v.style.setProperty('padding',(outerBoxSize-middleBoxSize)/2,'important');
});

$(window).load(function()
{
    /*Center the checkpoint vertically to the row*/ 
    $('.row').height($('.checkpoint').height()*3)

    /*Center the checkpoint vertically to the row*/ 
    $('.row').css('padding-top',$('.checkpoint').height()); 
});
$('.checkpoint').each(function(i,v)
    {
    $(this).hover
    (
    function()
    {
    $(this).find('.outer-box').css("background-color","#bbb");
    },
    function()
    {
    var hiddenBg=$('#timedulines').css('background-color');
    $(this).find('.outer-box').css('background-color',hiddenBg);
    }
    )
    });

});

最佳答案

对于 Transit JS ( http://ricostacruz.com/jquery.transit/ ) 来说可能是一个很好的工作，并使用 scale 函数做这样的事情:

$('.circle outer-box').transition({ scale: 1.5, useTranslate3d: true }, { queue: true, duration: 200, easing: null, complete: myCallbackFunc });

function myCallbackFunc() {
$('.circle outer-box').transition({ scale: 1.0, useTranslate3d: true }, { queue: true, duration: 200, easing: null, complete: null });
}

关于javascript - 触发两个连续的快速悬停以模拟 CSS/JQUERY 中的脉冲效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39015975/

25 4 0
文章推荐： javascript - Intro.js 2页然后返回首页
文章推荐： php - 使用 php 从变量打印 gif
文章推荐： php - 让cronjob以PHP5的形式运行PHP脚本
文章推荐： PHP父函数无法看到子类成员
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com