te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to inspect animation of an HTML element? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to inspect animation of an HTML element? - Stack Overflow

    javascript - How to inspect animation of an HTML element? - Stack Overflow

    programmeradmin4浏览0评论

    I want to see the CSS transition or JavaScript/jQuery animation assigned to a particular element. How should I do it in Chrome DevTools or any other developer tools?

    For instance, I visited a Google plus page and I noticed that when I hover on an image it grays out, zooms in and a close button appears in the corner.

    Normal:

    Hover:

    How can I see the code behind this behavior?

    I want to see the CSS transition or JavaScript/jQuery animation assigned to a particular element. How should I do it in Chrome DevTools or any other developer tools?

    For instance, I visited a Google plus page and I noticed that when I hover on an image it grays out, zooms in and a close button appears in the corner.

    Normal:

    Hover:

    How can I see the code behind this behavior?

    • javascript
    • css
    • google-chrome-devtools
    Share Improve this question asked Apr 12, 2013 at 9:05 JonasJonas 1571 silver badge7 bronze badges
    Add a ment  | 

    4 Answers 4

    Reset to default 5

    Right click on the html elements in elements tab and select :hover options. Now you can see the hover css applied to the particular elements in right-hand side styles tab. Pls refer screen shot

    For css transitions, its easy to spot when using the chrome dev tools. Just right click on the animation you want to view bring up the inspector. Change the state of the element to hover and you can view all the css for the hovered element.

    For javascript, you can use the Resources tab in the chrome dev tools to view what scripts fires.. Just go through it.

    For your effect.. its most probably Javascript.

    they will register a Hover event. a hover event can be added by various methods

    1. in CSS 

      #someId:hover
{
 color:red;
}

    2. in Jquery. $('#someid').hover();

    3. via Unobtrusive jquery. they will attach events in unobtrusive manner

    now check for the view source for this method. some where they will attach the events.

    There is no easy way with JavaScript as far as I know, but the following is my favorite answer and method when I'm working on css in Chrome., you can force states and inspect hover css etc.

    https://stackoverflow./a/6778547/941896

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论